## Contents - 6. Theming (Dark Mode) - CSS Variables Approach - No-FOUC theme script (run before paint) - Theme Toggle Component (SSR-safe, accessible) ## 6. Theming (Dark Mode) ### CSS Variables Approach Override the same token names under a `.dark` selector. On Tailwind v4 this lives in plain CSS *after* the `@theme` block (it re-points the existing `--color-*` vars); on v3 it's a separate `tokens/dark.css`. ```css /* Dark theme — overrides the --color-* tokens defined in @theme / :root */ .dark, [data-theme="dark"] { --color-primary: oklch(0.707 0.165 254.6); /* ≈ #60a5fa */ --color-primary-hover: oklch(0.789 0.135 255.5); --color-primary-foreground: oklch(0.208 0.042 265.8); --color-background: oklch(0.208 0.042 265.8); /* ≈ #0f172a */ --color-foreground: oklch(0.984 0.003 247.9); --color-muted: oklch(0.279 0.041 260); --color-muted-foreground: oklch(0.704 0.04 256.8); --color-border: oklch(0.372 0.044 257.3); } /* Tell the UA to render native form controls / scrollbars dark too. */ .dark { color-scheme: dark; } ``` ### No-FOUC theme script (run before paint) Reading `localStorage` in `useEffect` flashes the wrong theme on first paint (the class is applied after hydration). Set the class **synchronously** before React mounts via a blocking inline script in ``. In Next.js App Router this goes in the root `layout.tsx`; with a CMS/HTML it's a `