From 0cded1ba6048b661e1d0ed0263100b9fae86ed4b Mon Sep 17 00:00:00 2001
From: Marc Beninca <git@marc.beninca.link>
Date: Tue, 18 Feb 2025 00:01:39 +0100
Subject: [PATCH] dark,light

---
 script/main.js | 28 ++++++++++++----------------
 style/main.css |  3 ++-
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/script/main.js b/script/main.js
index 69dc4b8..5f78a27 100644
--- a/script/main.js
+++ b/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();
diff --git a/style/main.css b/style/main.css
index 44ff74a..2036b6e 100644
--- a/style/main.css
+++ b/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;