dark,light

script/main.js

@@ -1,35 +1,31 @@
 const button = document.getElementById("theme");
-const classes = document.documentElement.classList;
 
-function button_refresh() {
-    button.innerHTML = theme_get();
-}
 function theme_get() {
-    return classes.contains("dark")?"dark":"light";
+    return document.documentElement.getAttribute("data-theme");
 }
-function theme_read() {
+function theme_load() {
     const theme = localStorage.getItem("theme");
     if (theme) {
         theme_set(theme);
     }
 }
 function theme_set(theme) {
-    if (theme == "dark") {
-        classes.add("dark");
-    }
-    button_refresh();
+    document.documentElement.setAttribute("data-theme", theme);
+    button.innerHTML = theme;
+    theme_write(theme);
+}
+function theme_swap(theme) {
+    return theme === "dark" ? "light" : "dark";
 }
 function theme_toggle() {
-    classes.toggle("dark");
-    button_refresh();
-    theme_write();
+    theme_set(theme_swap(theme_get()));
 }
-function theme_write() {
-    localStorage.setItem("theme", theme_get());
+function theme_write(theme) {
+    localStorage.setItem("theme", theme);
 }
 
 button.addEventListener("click", () => {
     theme_toggle();
 });
 
-theme_read();
+theme_load();

style/main.css

@@ -1,4 +1,5 @@
 :root {
+    color-scheme: light dark;
     --margin: .4rem;
 }
 :root {
@@ -16,7 +17,7 @@
 --ruler-border: #888;
 }
 @media screen {
-.dark {
+[data-theme="dark"] {
 --anchor-background: #222;
 --anchor-text: #f88;
 --banner-background: #558;