add system theme mode

Author: radibit

src/components/SiteNav.astro

@@ -42,27 +42,52 @@
       class="flex items-center gap-2 bg-transparent border-[1.5px] border-fg text-fg px-4 py-[0.45rem] font-sans text-[0.8125rem] font-medium tracking-widest uppercase cursor-pointer transition-colors duration-200 hover:bg-fg hover:text-bg"
     >
       <span aria-hidden="true" class="text-[0.9rem] leading-none">◐</span>
-      <span id="theme-label">Dark mode</span>
+      <span id="theme-label">System mode</span>
     </button>
   </div>
 </nav>
 
 <script>
+  const MODES = ['system', 'light', 'dark'] as const;
+  type Mode = (typeof MODES)[number];
+
   const toggle = document.getElementById('theme-toggle');
   const label = document.getElementById('theme-label');
   const html = document.documentElement;
 
-  function applyTheme(theme: string) {
-    html.setAttribute('data-theme', theme);
-    if (label) label.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+  const modeLabels: Record<Mode, string> = {
+    system: 'System mode',
+    light: 'Light mode',
+    dark: 'Dark mode',
+  };
+
+  function getStoredMode(): Mode {
+    const saved = localStorage.getItem('theme');
+    if (saved === 'light' || saved === 'dark') return saved;
+    return 'system';
+  }
+
+  function applyMode(mode: Mode) {
+    if (mode === 'system') {
+      localStorage.removeItem('theme');
+      const sys = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+      html.setAttribute('data-theme', sys);
+    } else {
+      localStorage.setItem('theme', mode);
+      html.setAttribute('data-theme', mode);
+    }
+    if (label) label.textContent = modeLabels[mode];
   }
 
-  const current = html.getAttribute('data-theme') || 'light';
-  if (label) label.textContent = current === 'dark' ? 'Light mode' : 'Dark mode';
+  let currentMode: Mode = getStoredMode();
+  // Set label on init; theme is already applied by the no-flash inline script
+  if (label) label.textContent = modeLabels[currentMode];
 
   toggle?.addEventListener('click', () => {
-    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
-    applyTheme(next);
-    localStorage.setItem('theme', next);
+    const idx = MODES.indexOf(currentMode);
+    currentMode = MODES[(idx + 1) % MODES.length];
+    applyMode(currentMode);
   });
 </script>