diff --git a/synculous-client/darkmode.md b/synculous-client/darkmode.md new file mode 100644 index 0000000..467e509 --- /dev/null +++ b/synculous-client/darkmode.md @@ -0,0 +1,106 @@ +# 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 `