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:
@@ -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)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user