fix: attempt to fix color scheme on demo by forcing it on load (#37)

app/mod.css

@@ -72,28 +72,10 @@ body > footer svg.sponsor {
   fill: var(--variant);
 }
 
-[data-color-scheme="dark"] body > header svg.light {
+body > header svg.light, body > header svg.dark {
   display: none;
 }
 
-[data-color-scheme="light"] body > header svg.dark {
-  display: none;
-}
-
-:root:not([data-color-scheme="dark"]) body > header svg.dark {
-  display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-color-scheme="light"]) body > header svg.dark {
-    display: inline-block;
-  }
-
-  :root:not([data-color-scheme="light"]) body > header svg.light {
-    display: none;
-  }
-}
-
 /* Matcha build */
 details summary a {
   pointer-events: none;

app/mod.html

@@ -20,7 +20,7 @@
       <h1><a class="success" href="#">matcha.css</a></h1>
       <nav>
         <menu>
-          <li><a href="#" onclick="event.preventDefault();document.querySelector('html').dataset.colorScheme = (document.querySelector('html').dataset.colorScheme ?? (matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light')) === 'light' ? 'dark' : 'light'" class="color-scheme">
+          <li><a href="#" class="color-scheme">
             <svg class="light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z"></path></svg>
             <svg class="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z"></path></svg>
           </a></li>

app/mod.js

@@ -1,14 +1,26 @@
 /// <reference lib="dom" />
-const prefers = matchMedia("(prefers-color-scheme: dark)") ? "dark" : "light"
+const prefers = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+const html = document.querySelector("html")
+html.dataset.colorScheme = prefers
+document.querySelectorAll(`body > header .color-scheme`).forEach((element) => {
+  element.querySelector(`svg.${prefers}`).style.display = "inline-block"
+  element.addEventListener("click", () => {
+    toggleColorScheme(html.dataset, element)
+  })
+})
 document.querySelectorAll(".example-tabs li.color-scheme").forEach((element) => {
   element.querySelector(`svg.${prefers}`).style.display = "inline-block"
-  element.addEventListener("click", (_) => {
+  element.addEventListener("click", () => {
     const example = element.parentNode.nextElementSibling
     if (example.tagName === "IFRAME") {
       example.contentWindow.document.documentElement.dataset.colorScheme = (example.contentWindow.document.documentElement.dataset.colorScheme ?? prefers) === "light" ? "dark" : "light"
     }
-    example.dataset.colorScheme = (example.dataset.colorScheme ?? prefers) === "light" ? "dark" : "light"
-    element.querySelector("svg.light").style.display = example.dataset.colorScheme === "light" ? "inline-block" : "none"
-    element.querySelector("svg.dark").style.display = example.dataset.colorScheme === "dark" ? "inline-block" : "none"
+    toggleColorScheme(example.dataset, element)
   })
 })
+
+function toggleColorScheme(dataset, element) {
+  dataset.colorScheme = (dataset.colorScheme ?? prefers) === "light" ? "dark" : "light"
+  element.querySelector("svg.light").style.display = dataset.colorScheme === "light" ? "inline-block" : "none"
+  element.querySelector("svg.dark").style.display = dataset.colorScheme === "dark" ? "inline-block" : "none"
+}