# Dark Mode Implementation Plan ## Context The Synculous client already has a bare `@media (prefers-color-scheme: dark)` in `globals.css` that only flips `body` background/foreground. Every component uses hardcoded Tailwind classes (`bg-white`, `bg-gray-50`, `text-gray-900`, etc.) with no `dark:` variants, so manually switching modes via a button has no effect. The goal is a user-controlled toggle that persists preference, respects the OS default, and applies comprehensive dark styles across all pages. --- ## Steps ### 1. Configure Tailwind v4 for class-based dark mode **File:** `src/app/globals.css` Add the Tailwind v4 CSS directive that maps `dark:` utilities to an ancestor `.dark` class: ```css @variant dark (&:where(.dark, .dark *)); ``` Replace the `@media (prefers-color-scheme: dark)` block with a `.dark` selector: ```css .dark { --background: #0a0a0a; --foreground: #ededed; } ``` ### 2. Create ThemeProvider **New file:** `src/components/theme/ThemeProvider.tsx` A minimal React context provider: - State: `isDark: boolean` - On mount: reads `localStorage.getItem('theme')`, falls back to `window.matchMedia('(prefers-color-scheme: dark)').matches` - Applies/removes `dark` class on `document.documentElement` - `toggleDark()` function that flips state and saves to `localStorage` - Exports `useTheme()` hook ### 3. Anti-flash script + wrap in layout **File:** `src/app/layout.tsx` - Add ThemeProvider wrapping `AuthProvider` - Add inline `