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>
This commit is contained in:
agent-company
2026-03-26 10:15:11 +00:00
parent 55c131cb32
commit a4aa968434
9 changed files with 103 additions and 13 deletions
+7 -6
View File
@@ -4,6 +4,7 @@ export default {
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {
colors: {
@@ -16,15 +17,15 @@ export default {
warning: '#f59e0b',
error: '#ef4444',
bg: {
dark: '#0f172a',
card: '#1e293b',
'card-hover': '#334155',
dark: 'var(--color-bg-dark)',
card: 'var(--color-bg-card)',
'card-hover': 'var(--color-bg-card-hover)',
},
text: {
primary: '#f8fafc',
secondary: '#94a3b8',
primary: 'var(--color-text-primary)',
secondary: 'var(--color-text-secondary)',
},
border: '#334155',
border: 'var(--color-border)',
},
},
},