Description
Build a complete theme system that supports dark, light, and system-preference modes; allows per-component theme overrides via context; persists preference across sessions; animates theme transitions; and exposes a developer toggle in the dev tools page.
Acceptance Criteria
Context
- Check
tailwind.config.js for current darkMode setting — update if needed
- Next.js 14 App Router: theme class must be set on
<html> element in src/app/layout.tsx
suppressHydrationWarning on <html> prevents hydration mismatch from server/client theme difference
Description
Build a complete theme system that supports dark, light, and system-preference modes; allows per-component theme overrides via context; persists preference across sessions; animates theme transitions; and exposes a developer toggle in the dev tools page.
Acceptance Criteria
src/contexts/ThemeContext.tsxwithThemeProvideranduseThemehook"light","dark","system"(followsprefers-color-schememedia query)systemmode updates automatically if OS preference changes without page reload (viamatchMedialistener)localStorageas"theme"; hydrated before first paint to prevent flash of wrong theme (usesuppressHydrationWarningpattern for Next.js)src/components/ThemeToggle.tsx: cycles through light→dark→system; shows icon for each mode; accessible witharia-labeland keyboard supporttransition: color 200ms, background-color 200mstoglobals.css)<ThemeProvider forcedTheme="dark">nested anywhere forces dark mode for its subtree onlysrc/app/settings/api/page.tsxand also tosrc/app/dev/debugger/page.tsxdarkMode: 'class'strategy — no inline stylesmatchMediachange, localStorage persistence, forced theme override, no flash on hydrationContext
tailwind.config.jsfor currentdarkModesetting — update if needed<html>element insrc/app/layout.tsxsuppressHydrationWarningon<html>prevents hydration mismatch from server/client theme difference