Dark mode for HTML documents (#1980)

Co-authored-by: Ralf Handl <[email protected]>
oasis-tcs · Aug 28, 2024 · afbca85 · afbca85
1 parent 3289b29
commit afbca85
Show file tree

Hide file tree

Showing 17 changed files with 459 additions and 0 deletions.
diff --git a/docs/odata-csdl-json/odata-csdl-json.html b/docs/odata-csdl-json/odata-csdl-json.html
@@ -97,10 +97,48 @@
       }
     }};
   </script>
+  <script type="text/javascript">
+    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");
+        }
+      }
+
+      function darkmode_manual() {
+        localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
+        switch (darkmode_switch.value) {
+          case "off":
+            document.body.classList.remove("darkmode");
+            break;
+          case "on":
+            document.body.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-common-schema-definition-language-csdl-json-representation-version-402">OData Common Schema Definition Language (CSDL) JSON Representation Version 4.02</h1>

diff --git a/docs/odata-csdl-json/styles/odata.css b/docs/odata-csdl-json/styles/odata.css
@@ -201,6 +201,21 @@ hr:first-of-type {
 }
 
 @media screen {
+  body {
+    position: relative;
+  }
+
+  #darkmode {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  body.darkmode {
+    background-color: black;
+    filter: invert(100%);
+  }
+
   details:not([open]) > summary {
     list-style: disclosure-closed;
   }
@@ -211,6 +226,10 @@ hr:first-of-type {
 }
 
 @media print {
+  #darkmode {
+    display: none;
+  }
+
   details > summary {
     list-style: none;
   }

diff --git a/docs/odata-csdl-xml/odata-csdl-xml.html b/docs/odata-csdl-xml/odata-csdl-xml.html
@@ -97,10 +97,48 @@
       }
     }};
   </script>
+  <script type="text/javascript">
+    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");
+        }
+      }
+
+      function darkmode_manual() {
+        localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
+        switch (darkmode_switch.value) {
+          case "off":
+            document.body.classList.remove("darkmode");
+            break;
+          case "on":
+            document.body.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-common-schema-definition-language-csdl-xml-representation-version-402">OData Common Schema Definition Language (CSDL) XML Representation Version 4.02</h1>

diff --git a/docs/odata-csdl-xml/styles/odata.css b/docs/odata-csdl-xml/styles/odata.css
@@ -201,6 +201,21 @@ hr:first-of-type {
 }
 
 @media screen {
+  body {
+    position: relative;
+  }
+
+  #darkmode {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  body.darkmode {
+    background-color: black;
+    filter: invert(100%);
+  }
+
   details:not([open]) > summary {
     list-style: disclosure-closed;
   }
@@ -211,6 +226,10 @@ hr:first-of-type {
 }
 
 @media print {
+  #darkmode {
+    display: none;
+  }
+
   details > summary {
     list-style: none;
   }

diff --git a/docs/odata-data-aggregation-ext/odata-data-aggregation-ext.html b/docs/odata-data-aggregation-ext/odata-data-aggregation-ext.html
@@ -97,10 +97,48 @@
       }
     }};
   </script>
+  <script type="text/javascript">
+    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");
+        }
+      }
+
+      function darkmode_manual() {
+        localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
+        switch (darkmode_switch.value) {
+          case "off":
+            document.body.classList.remove("darkmode");
+            break;
+          case "on":
+            document.body.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-extension-for-data-aggregation-version-40">OData Extension for Data Aggregation Version 4.0</h1>

diff --git a/docs/odata-data-aggregation-ext/styles/odata.css b/docs/odata-data-aggregation-ext/styles/odata.css
@@ -201,6 +201,21 @@ hr:first-of-type {
 }
 
 @media screen {
+  body {
+    position: relative;
+  }
+
+  #darkmode {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  body.darkmode {
+    background-color: black;
+    filter: invert(100%);
+  }
+
   details:not([open]) > summary {
     list-style: disclosure-closed;
   }
@@ -211,6 +226,10 @@ hr:first-of-type {
 }
 
 @media print {
+  #darkmode {
+    display: none;
+  }
+
   details > summary {
     list-style: none;
   }

diff --git a/docs/odata-json-format/odata-json-format.html b/docs/odata-json-format/odata-json-format.html
@@ -97,10 +97,48 @@
       }
     }};
   </script>
+  <script type="text/javascript">
+    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");
+        }
+      }
+
+      function darkmode_manual() {
+        localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
+        switch (darkmode_switch.value) {
+          case "off":
+            document.body.classList.remove("darkmode");
+            break;
+          case "on":
+            document.body.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-json-format-version-402">OData JSON Format Version 4.02</h1>

diff --git a/docs/odata-json-format/styles/odata.css b/docs/odata-json-format/styles/odata.css
@@ -201,6 +201,21 @@ hr:first-of-type {
 }
 
 @media screen {
+  body {
+    position: relative;
+  }
+
+  #darkmode {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  body.darkmode {
+    background-color: black;
+    filter: invert(100%);
+  }
+
   details:not([open]) > summary {
     list-style: disclosure-closed;
   }
@@ -211,6 +226,10 @@ hr:first-of-type {
 }
 
 @media print {
+  #darkmode {
+    display: none;
+  }
+
   details > summary {
     list-style: none;
   }

diff --git a/docs/odata-protocol/odata-protocol.html b/docs/odata-protocol/odata-protocol.html
@@ -97,10 +97,48 @@
       }
     }};
   </script>
+  <script type="text/javascript">
+    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");
+        }
+      }
+
+      function darkmode_manual() {
+        localStorage.setItem("odata-specs/darkmode", darkmode_switch.value);
+        switch (darkmode_switch.value) {
+          case "off":
+            document.body.classList.remove("darkmode");
+            break;
+          case "on":
+            document.body.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-version-402-part-1-protocol">OData Version 4.02. Part 1: Protocol</h1>