Tweaks and fixes

src/assets/css/style.css

@@ -10,12 +10,17 @@
     --accent: #46c;
   }
 }
-/* Explicit “.dark” toggle override */
+/* Explicit theme toggle overrides (win over media query when set) */
 html.dark {
   --bg: #111;
   --fg: #eee;
   --accent: #46c;
 }
+html.light {
+  --bg: #fff;
+  --fg: #222;
+  --accent: #007acc;
+}
 body {
   margin: 0;
   font-family: sans-serif;

src/assets/js/script.js

@@ -1,12 +1,28 @@
-// --- theme toggle (unchanged) ---
+// --- theme toggle ---
 const toggle = document.getElementById('theme-toggle');
 const root = document.documentElement;
 const saved = localStorage.getItem('dark-mode');
 const sysDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-if (saved === 'true' || (saved === null && sysDark)) root.classList.add('dark');
+if (saved === 'true') {
+  root.classList.add('dark');
+  root.classList.remove('light');
+} else if (saved === 'false') {
+  root.classList.add('light');
+  root.classList.remove('dark');
+} else {
+  if (sysDark) {
+    root.classList.add('dark');
+    root.classList.remove('light');
+  } else {
+    root.classList.add('light');
+    root.classList.remove('dark');
+  }
+}
 toggle.addEventListener('click', () => {
-  const isDark = root.classList.toggle('dark');
-  localStorage.setItem('dark-mode', isDark);
+  const isDark = root.classList.contains('dark');
+  root.classList.toggle('dark', !isDark);
+  root.classList.toggle('light', isDark);
+  localStorage.setItem('dark-mode', !isDark);
 });
 
 const body = document.body;