chore: replace partially working switcher with prefers-color-scheme media query

Author: fuzzzerd

demo/index.html

@@ -16,7 +16,6 @@
         <a href="#paragraph">Paragraph Content.</a>
         <a href="#tabledata">Table Data</a>
         <a href="#formdata">Form Data</a>
-        <a href="#themeswitcher">Theme Switcher</a>
       </nav>
     </header>
     <main>
@@ -135,47 +134,7 @@ <h2 id="formdata">Form</h2>
           <input type="submit" value="Send message" />
         </fieldset>
       </form>
-
-      <h2 id="themeswitcher">Theme Switcher</h2>
-      <input
-        type="radio"
-        id="light"
-        name="theme-name"
-        value="light"
-        onclick="setTheme('light')"
-      />
-      <label for="light">light</label><br />
-      <input
-        type="radio"
-        id="dark"
-        name="theme-name"
-        value="dark"
-        onclick="setTheme('dark')"
-      />
-      <label for="dark">dark</label><br />
-
-      <input
-        type="radio"
-        id="high-contrast"
-        name="theme-name"
-        value="high-contrast"
-        onclick="setTheme('high-contrast')"
-      />
-      <label for="high-contrast">high-contrast</label><br />
     </main>
     <footer>author, (c), etc</footer>
-    <script>
-      // let dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-      // if (dark) setTheme("dark");
-
-      function setTheme(theme) {
-        document.documentElement.classList.add("theme-switch");
-        document.documentElement.setAttribute("data-theme", theme);
-        window.setTimeout(function () {
-          document.documentElement.classList.remove("theme-switch");
-        }, 1000);
-      }
-    </script>
   </body>
 </html>

demo/tinycss.css

@@ -1,24 +1,40 @@
-// todo: high-contrast: https://mwichary.medium.com/dark-theme-in-a-day-3518dde2955a
 * {
   box-sizing: border-box;
 }
 
 :root {
   --sans-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 
-  --background: #fff;
-  --accent-background: #dfe1e9;
-  --text: #252525;
-  --text-light: #585858;
+  --background-light: #fff;
+  --accent-background-light: #dfe1e9;
+  --text-light: #252525;
+  --text-light-light: #585858;
+
+  --background-dark: rgb(52, 51, 58);
+  --accent-background-dark: rgb(81, 79, 90);
+  --text-dark: #d8d8d8;
+  --text-light-dark: #ffffff;
+
   --border: #cecfd4;
   --accent: #fa986b;
+  --accent-dark: #b44512;
+  --accent-light: #f7bca3;
+}
+
+html {
+  --background: var(--background-light);
+  --accent-background: var(--accent-background-light);
+  --text: var(--text-light);
+  --text-light: var(--text-light-light);
 }
 
-html[data-theme="dark"] {
-  --background: rgb(52, 51, 58);
-  --accent-background: rgb(81, 79, 90);
-  --text: #d8d8d8;
-  --text-light: #ffffff;
+@media (prefers-color-scheme: dark) {
+  html {
+    --background: var(--background-dark);
+    --accent-background: var(--accent-background-dark);
+    --text: var(--text-dark);
+    --text-light: var(--text-light-dark);
+  }
 }
 
 html {
@@ -29,14 +45,6 @@ html {
   background: var(--background);
 }
 
-html.theme-switch,
-html.theme-switch *,
-html.theme-switch *:before,
-html.theme-switch *:after {
-  transition: all 650ms !important;
-  transition-delay: 0 !important;
-}
-
 header {
   color: var(--text);
 }
@@ -50,12 +58,14 @@ body {
 }
 
 a {
-  color: #b44512;
+  color: var(--accent-dark);
   text-decoration: underline;
+
   &:visited {
     color: var(--text);
     text-decoration: dotted;
   }
+
   &:hover {
     color: var(--accent);
     text-decoration: none;