feat: add dark/light mode toggle with localStorage persistence

- Enable Tailwind "class" dark mode strategy - Use CSS custom properties for theme colors (bg, text, border) - Add ThemeProvider context with toggle and localStorage persistence - Add Sun/Moon toggle button in the header navigation - Inline script in index.html prevents FOUC on page load - All pages (Layout, Login, Register, ProtectedRoute) support both modes - Default theme follows system preference (prefers-color-scheme) Closes leeworks-agents/SPARC#33 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 10:15:11 +00:00
parent 55c131cb32
commit a4aa968434
9 changed files with 103 additions and 13 deletions
@@ -7,6 +7,15 @@
    <title>SPARC Dashboard</title>
  </head>
  <body>
+    <script>
+      // Prevent FOUC: apply saved theme before first render
+      (function() {
+        var theme = localStorage.getItem('theme');
+        if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>