feat: site-wide dark mode and improved debate timer

Author: Programcode

src/App.tsx

@@ -9,6 +9,7 @@ import { AppLayout } from "@/components/layout/AppLayout";
 import { AuthProvider } from "@/lib/supabase/AuthProvider";
 import { RequireAuth } from "@/components/auth/RequireAuth";
 import { OnboardingTour } from "@/components/features/onboarding/OnboardingTour";
+import { ThemeProvider } from "@/components/ThemeProvider";
 import { Loader2 } from "lucide-react";
 
 // Lazy load all pages for code splitting
@@ -40,43 +41,45 @@ const PageLoader = () => (
 const App = () => (
   <QueryClientProvider client={queryClient}>
     <AuthProvider>
-      <TooltipProvider>
-        <Toaster />
-        <Sonner />
-        <BrowserRouter>
-          <Suspense fallback={<PageLoader />}>
-            <Routes>
-              {/* Public Routes */}
-              <Route path="/" element={<LandingPage />} />
-              <Route path="/login" element={<LoginPage />} />
-              <Route path="/share/:code" element={<SharedPage />} />
+      <ThemeProvider>
+        <TooltipProvider>
+          <Toaster />
+          <Sonner />
+          <BrowserRouter>
+            <Suspense fallback={<PageLoader />}>
+              <Routes>
+                {/* Public Routes */}
+                <Route path="/" element={<LandingPage />} />
+                <Route path="/login" element={<LoginPage />} />
+                <Route path="/share/:code" element={<SharedPage />} />
 
-              {/* Protected App Routes */}
-              <Route
-                element={
-                  <RequireAuth>
-                    <OnboardingTour />
-                    <AppLayout />
-                  </RequireAuth>
-                }
-              >
-                <Route path="/app" element={<GeneratePage />} />
-                <Route path="/app/attack" element={<AttackPage />} />
-                <Route path="/app/brainstorm" element={<BrainstormPage />} />
-                <Route path="/app/factoids" element={<FactoidsPage />} />
-                <Route path="/app/ask" element={<AskPage />} />
-                <Route path="/app/history" element={<HistoryPage />} />
-                <Route path="/app/library" element={<LibraryPage />} />
-                <Route path="/app/timer" element={<TimerPage />} />
-                <Route path="/app/flowchart" element={<FlowchartPage />} />
-                <Route path="/app/settings" element={<SettingsPage />} />
-                <Route path="/app/admin" element={<AdminPage />} />
-              </Route>
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-          </Suspense>
-        </BrowserRouter>
-      </TooltipProvider>
+                {/* Protected App Routes */}
+                <Route
+                  element={
+                    <RequireAuth>
+                      <OnboardingTour />
+                      <AppLayout />
+                    </RequireAuth>
+                  }
+                >
+                  <Route path="/app" element={<GeneratePage />} />
+                  <Route path="/app/attack" element={<AttackPage />} />
+                  <Route path="/app/brainstorm" element={<BrainstormPage />} />
+                  <Route path="/app/factoids" element={<FactoidsPage />} />
+                  <Route path="/app/ask" element={<AskPage />} />
+                  <Route path="/app/history" element={<HistoryPage />} />
+                  <Route path="/app/library" element={<LibraryPage />} />
+                  <Route path="/app/timer" element={<TimerPage />} />
+                  <Route path="/app/flowchart" element={<FlowchartPage />} />
+                  <Route path="/app/settings" element={<SettingsPage />} />
+                  <Route path="/app/admin" element={<AdminPage />} />
+                </Route>
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </Suspense>
+          </BrowserRouter>
+        </TooltipProvider>
+      </ThemeProvider>
     </AuthProvider>
   </QueryClientProvider>
 );

src/components/ThemeProvider.tsx

@@ -0,0 +1,56 @@
+// src/components/ThemeProvider.tsx
+import { useEffect } from 'react';
+import { useSettingsStore } from '@/lib/stores/settings-store';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+    const theme = useSettingsStore((state) => state.theme);
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        // Remove existing theme classes
+        root.classList.remove('light', 'dark');
+
+        if (theme === 'system') {
+            // Check system preference
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+            root.classList.add(systemTheme);
+        } else {
+            root.classList.add(theme);
+        }
+    }, [theme]);
+
+    // Listen for system theme changes when in 'system' mode
+    useEffect(() => {
+        if (theme !== 'system') return;
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+        const handleChange = (e: MediaQueryListEvent) => {
+            const root = window.document.documentElement;
+            root.classList.remove('light', 'dark');
+            root.classList.add(e.matches ? 'dark' : 'light');
+        };
+
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [theme]);
+
+    return <>{children}</>;
+}
+
+// Hook for components that need current resolved theme
+export function useResolvedTheme(): 'light' | 'dark' {
+    const theme = useSettingsStore((state) => state.theme);
+
+    if (theme === 'system') {
+        if (typeof window !== 'undefined') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return 'light';
+    }
+
+    return theme;
+}

src/components/ThemeToggle.tsx

@@ -0,0 +1,25 @@
+import { Moon, Sun, Laptop } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useSettingsStore } from "@/lib/stores/settings-store";
+
+export function ThemeToggle() {
+    const { theme, setTheme } = useSettingsStore();
+
+    return (
+        <Button
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={() => {
+                if (theme === 'light') setTheme('dark');
+                else if (theme === 'dark') setTheme('system');
+                else setTheme('light');
+            }}
+            title={`Current theme: ${theme}. Click to cycle.`}
+        >
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    );
+}

src/components/layout/AppLayout.tsx

@@ -18,6 +18,7 @@ import {
 import { NavLink } from '@/components/NavLink';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { ThemeToggle } from '@/components/ThemeToggle';
 
 const navItems = [
   { path: '/app', label: 'Generate', icon: Sparkles, description: 'Build arguments' },
@@ -70,6 +71,7 @@ export function AppLayout() {
           </nav>
 
           <div className="flex items-center gap-2">
+            <ThemeToggle />
             <NavLink to="/app/settings">
               <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" aria-label="Settings">
                 <Settings className="h-5 w-5" />