Fix darkmode switch to canvas (#1981)

oasis-tcs · Aug 29, 2024 · 12d0448 · 12d0448
1 parent afbca85
commit 12d0448
Show file tree

Hide file tree

Showing 18 changed files with 119 additions and 103 deletions.
diff --git a/docs/odata-csdl-json/odata-csdl-json.html b/docs/odata-csdl-json/odata-csdl-json.html
@@ -101,19 +101,19 @@
     document.addEventListener("DOMContentLoaded", function () {
       function darkmode_auto() {
         if (darkmode_switch.value === "auto") {
-          if (darkmode_query.matches) document.body.classList.add("darkmode");
-          else document.body.classList.remove("darkmode");
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
         }
       }
 
       function darkmode_manual() {
         localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
         switch (darkmode_switch.value) {
           case "off":
-            document.body.classList.remove("darkmode");
+            document.documentElement.classList.remove("darkmode");
             break;
           case "on":
-            document.body.classList.add("darkmode");
+            document.documentElement.classList.add("darkmode");
             break;
           case "auto":
             darkmode_auto();

diff --git a/docs/odata-csdl-json/styles/odata.css b/docs/odata-csdl-json/styles/odata.css
@@ -201,18 +201,14 @@ hr:first-of-type {
 }
 
 @media screen {
-  body {
-    position: relative;
-  }
-
   #darkmode {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
   }
 
-  body.darkmode {
-    background-color: black;
+  html.darkmode {
+    background-color: #f2eee8;
     filter: invert(100%);
   }
 

diff --git a/docs/odata-csdl-xml/odata-csdl-xml.html b/docs/odata-csdl-xml/odata-csdl-xml.html
@@ -101,19 +101,19 @@
     document.addEventListener("DOMContentLoaded", function () {
       function darkmode_auto() {
         if (darkmode_switch.value === "auto") {
-          if (darkmode_query.matches) document.body.classList.add("darkmode");
-          else document.body.classList.remove("darkmode");
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
         }
       }
 
       function darkmode_manual() {
         localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
         switch (darkmode_switch.value) {
           case "off":
-            document.body.classList.remove("darkmode");
+            document.documentElement.classList.remove("darkmode");
             break;
           case "on":
-            document.body.classList.add("darkmode");
+            document.documentElement.classList.add("darkmode");
             break;
           case "auto":
             darkmode_auto();

diff --git a/docs/odata-csdl-xml/styles/odata.css b/docs/odata-csdl-xml/styles/odata.css
@@ -201,18 +201,14 @@ hr:first-of-type {
 }
 
 @media screen {
-  body {
-    position: relative;
-  }
-
   #darkmode {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
   }
 
-  body.darkmode {
-    background-color: black;
+  html.darkmode {
+    background-color: #f2eee8;
     filter: invert(100%);
   }
 

diff --git a/docs/odata-data-aggregation-ext/odata-data-aggregation-ext.html b/docs/odata-data-aggregation-ext/odata-data-aggregation-ext.html
@@ -101,19 +101,19 @@
     document.addEventListener("DOMContentLoaded", function () {
       function darkmode_auto() {
         if (darkmode_switch.value === "auto") {
-          if (darkmode_query.matches) document.body.classList.add("darkmode");
-          else document.body.classList.remove("darkmode");
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
         }
       }
 
       function darkmode_manual() {
         localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
         switch (darkmode_switch.value) {
           case "off":
-            document.body.classList.remove("darkmode");
+            document.documentElement.classList.remove("darkmode");
             break;
           case "on":
-            document.body.classList.add("darkmode");
+            document.documentElement.classList.add("darkmode");
             break;
           case "auto":
             darkmode_auto();

diff --git a/docs/odata-data-aggregation-ext/styles/odata.css b/docs/odata-data-aggregation-ext/styles/odata.css
@@ -201,18 +201,14 @@ hr:first-of-type {
 }
 
 @media screen {
-  body {
-    position: relative;
-  }
-
   #darkmode {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
   }
 
-  body.darkmode {
-    background-color: black;
+  html.darkmode {
+    background-color: #f2eee8;
     filter: invert(100%);
   }
 

diff --git a/docs/odata-json-format/odata-json-format.html b/docs/odata-json-format/odata-json-format.html
@@ -101,19 +101,19 @@
     document.addEventListener("DOMContentLoaded", function () {
       function darkmode_auto() {
         if (darkmode_switch.value === "auto") {
-          if (darkmode_query.matches) document.body.classList.add("darkmode");
-          else document.body.classList.remove("darkmode");
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
         }
       }
 
       function darkmode_manual() {
         localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
         switch (darkmode_switch.value) {
           case "off":
-            document.body.classList.remove("darkmode");
+            document.documentElement.classList.remove("darkmode");
             break;
           case "on":
-            document.body.classList.add("darkmode");
+            document.documentElement.classList.add("darkmode");
             break;
           case "auto":
             darkmode_auto();

diff --git a/docs/odata-json-format/styles/odata.css b/docs/odata-json-format/styles/odata.css
@@ -201,18 +201,14 @@ hr:first-of-type {
 }
 
 @media screen {
-  body {
-    position: relative;
-  }
-
   #darkmode {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
   }
 
-  body.darkmode {
-    background-color: black;
+  html.darkmode {
+    background-color: #f2eee8;
     filter: invert(100%);
   }
 

diff --git a/docs/odata-protocol/odata-protocol.html b/docs/odata-protocol/odata-protocol.html
@@ -101,19 +101,19 @@
     document.addEventListener("DOMContentLoaded", function () {
       function darkmode_auto() {
         if (darkmode_switch.value === "auto") {
-          if (darkmode_query.matches) document.body.classList.add("darkmode");
-          else document.body.classList.remove("darkmode");
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
         }
       }
 
       function darkmode_manual() {
         localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
         switch (darkmode_switch.value) {
           case "off":
-            document.body.classList.remove("darkmode");
+            document.documentElement.classList.remove("darkmode");
             break;
           case "on":
-            document.body.classList.add("darkmode");
+            document.documentElement.classList.add("darkmode");
             break;
           case "auto":
             darkmode_auto();

diff --git a/docs/odata-protocol/styles/odata.css b/docs/odata-protocol/styles/odata.css
@@ -201,18 +201,14 @@ hr:first-of-type {
 }
 
 @media screen {
-  body {
-    position: relative;
-  }
-
   #darkmode {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
   }
 
-  body.darkmode {
-    background-color: black;
+  html.darkmode {
+    background-color: #f2eee8;
     filter: invert(100%);
   }
 

diff --git a/docs/odata-temporal-ext/odata-temporal-ext.html b/docs/odata-temporal-ext/odata-temporal-ext.html
@@ -101,19 +101,19 @@
     document.addEventListener("DOMContentLoaded", function () {
       function darkmode_auto() {
         if (darkmode_switch.value === "auto") {
-          if (darkmode_query.matches) document.body.classList.add("darkmode");
-          else document.body.classList.remove("darkmode");
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
         }
       }
 
       function darkmode_manual() {
         localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
         switch (darkmode_switch.value) {
           case "off":
-            document.body.classList.remove("darkmode");
+            document.documentElement.classList.remove("darkmode");
             break;
           case "on":
-            document.body.classList.add("darkmode");
+            document.documentElement.classList.add("darkmode");
             break;
           case "auto":
             darkmode_auto();

diff --git a/docs/odata-temporal-ext/styles/odata.css b/docs/odata-temporal-ext/styles/odata.css
@@ -201,18 +201,14 @@ hr:first-of-type {
 }
 
 @media screen {
-  body {
-    position: relative;
-  }
-
   #darkmode {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
   }
 
-  body.darkmode {
-    background-color: black;
+  html.darkmode {
+    background-color: #f2eee8;
     filter: invert(100%);
   }
 

diff --git a/docs/odata-url-conventions/odata-url-conventions.html b/docs/odata-url-conventions/odata-url-conventions.html
@@ -101,19 +101,19 @@
     document.addEventListener("DOMContentLoaded", function () {
       function darkmode_auto() {
         if (darkmode_switch.value === "auto") {
-          if (darkmode_query.matches) document.body.classList.add("darkmode");
-          else document.body.classList.remove("darkmode");
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
         }
       }
 
       function darkmode_manual() {
         localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
         switch (darkmode_switch.value) {
           case "off":
-            document.body.classList.remove("darkmode");
+            document.documentElement.classList.remove("darkmode");
             break;
           case "on":
-            document.body.classList.add("darkmode");
+            document.documentElement.classList.add("darkmode");
             break;
           case "auto":
             darkmode_auto();

diff --git a/docs/odata-url-conventions/styles/odata.css b/docs/odata-url-conventions/styles/odata.css
@@ -201,18 +201,14 @@ hr:first-of-type {
 }
 
 @media screen {
-  body {
-    position: relative;
-  }
-
   #darkmode {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
   }
 
-  body.darkmode {
-    background-color: black;
+  html.darkmode {
+    background-color: #f2eee8;
     filter: invert(100%);
   }
 

diff --git a/docs/odata-vocabularies/odata-vocabularies.html b/docs/odata-vocabularies/odata-vocabularies.html
@@ -24,10 +24,57 @@
   </style>
   <link rel="stylesheet" href="styles/markdown-styles-v1.7.3b.css" />
   <link rel="stylesheet" href="styles/odata.css" />
+  <script type="text/javascript">
+    MathJax = {startup: {
+      ready() {
+        MathJax.startup.defaultReady();
+        MathJax.startup.document.outputJax.font.variant.monospace.chars
+          [0x2019] = [.611, -.287, .525, {f: "T", c: "′"}];
+      }
+    }};
+  </script>
+  <script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", function () {
+      function darkmode_auto() {
+        if (darkmode_switch.value === "auto") {
+          if (darkmode_query.matches) document.documentElement.classList.add("darkmode");
+          else document.documentElement.classList.remove("darkmode");
+        }
+      }
+
+      function darkmode_manual() {
+        localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
+        switch (darkmode_switch.value) {
+          case "off":
+            document.documentElement.classList.remove("darkmode");
+            break;
+          case "on":
+            document.documentElement.classList.add("darkmode");
+            break;
+          case "auto":
+            darkmode_auto();
+            break;
+        }
+      }
+
+      const darkmode_query = matchMedia("(prefers-color-scheme: dark)");
+      darkmode_query.addEventListener("change", darkmode_auto);
+      const darkmode_switch = document.getElementById("darkmode");
+      darkmode_switch.value =
+        localStorage.getItem("odata-specs/darkmode") || "off";
+      darkmode_switch.addEventListener("change", darkmode_manual);
+      darkmode_manual();
+    });
+  </script>
   <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
 </head>
 <body>
+<select id="darkmode">
+  <option value="off" title="Light mode">&#x263C;</option>
+  <option value="on" title="Dark mode">&#x263D;</option>
+  <option value="auto" title="Follow device mode">&#x25D1;</option>
+</select>
 <p><img src="https://docs.oasis-open.org/templates/OASISLogo-v3.0.png" alt="OASIS Logo" /></p>
 <hr />
 <h1 id="odata-vocabularies-version-40">OData Vocabularies Version 4.0</h1>