website

commit 70f492e7b66f4dbc1460d954ae8a7b4246e6fe3d
parent d6878e9061a7dc42858545f5e40fab5893e4716f
Author: Willem Van Zwol <willem@vanzwol.com>
Date:   Thu, 21 May 2026 16:42:44 -0700

Fixed dark/light mode

previously the toggle worked fine, but everytime you load a new page it
would automatically assume you want light mode and you would have to
press the button again and again. Now the default color scheme is based
on your browser settings, and the toggle overrides this.

Diffstat:
M
script.js
 | 
23
+++++++++++++++++++++++
M
styles.css
 | 
27
+++++++++++++++++++++------

2 files changed, 44 insertions(+), 6 deletions(-)
diff --git a/script.js b/script.js
@@ -1,3 +1,26 @@
+// dark/light mode toggle logic
+document.addEventListener("DOMContentLoaded", () => {
+  const root = document.documentElement;
+  const toggle = document.getElementById("theme-toggle");
+
+  const saved = localStorage.getItem("theme");
+
+  if (saved) {
+    root.classList.add(saved);
+    toggle.checked = saved === "dark";
+  }
+
+  toggle.addEventListener("change", () => {
+    const mode = toggle.checked ? "dark" : "light";
+
+    root.classList.remove("dark", "light");
+    root.classList.add(mode);
+
+    localStorage.setItem("theme", mode);
+  });
+});
+
+// clipboard code blocks
 document.addEventListener("click", async (e) => {
   const pre = e.target.closest("pre");
   if (!pre) return;
diff --git a/styles.css b/styles.css
@@ -7,20 +7,35 @@
   --transition-fast: 120ms;
 }
 
-/* system default already applies via :root */
+/* system dark */
+@media (prefers-color-scheme: dark) {
+  html:not(.light) {
+    --bg: #090909;
+    --text: #eaeaea;
+    --border: #262626;
+    --link: #6aa7ff;
+    --accent: #6aa7ff;
+
+  a[href^="http://"]::after,
+  a[href^="https://"]::after {
+    filter: invert(1);
+  }
+}
 
 /* manual override */
-body:has(#theme-toggle:checked) {
+html.dark {
   --bg: #090909;
   --text: #eaeaea;
   --border: #262626;
   --link: #6aa7ff;
   --accent: #6aa7ff;
+}
 
-  a[href^="http://"]::after,
-  a[href^="https://"]::after {
-    filter: invert(1);
-  }
+html.light {
+  --bg: #fff;
+  --text: #000;
+  --border: #d0d0d0;
+  --link: #0645ad;
 }
 
 a[href^="http"]::after {