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
+3
View File
@@ -1,6 +1,7 @@
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthProvider } from './context/AuthContext';
import { ThemeProvider } from './context/ThemeContext';
import { Layout } from './components/Layout';
import { ProtectedRoute } from './components/ProtectedRoute';
import { Login } from './pages/Login';
@@ -22,6 +23,7 @@ const queryClient = new QueryClient({
function App() {
return (
<ThemeProvider>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<BrowserRouter>
@@ -61,6 +63,7 @@ function App() {
</BrowserRouter>
</AuthProvider>
</QueryClientProvider>
</ThemeProvider>
);
}