feat: add light/dark theme toggle with system preference detection

- Implement theme store with localStorage persistence - Add ThemeToggle component with animated icon transitions - Update color system with semantic tokens for light/dark modes - Add blocking script in app.html to prevent FOUC - Apply theme-aware styling across all public and admin pages
2026-02-01 00:26:39 -06:00 · 2026-01-06 20:31:24 -06:00
parent 0149dc1df9
commit 5c4d3b6efa
26 changed files with 336 additions and 190 deletions
@@ -3,6 +3,15 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script>
+      (function() {
+        const stored = localStorage.getItem('theme');
+        const isDark = stored === 'dark' || (stored !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (isDark) {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">