Problem
components/theme-provider.tsx wraps next-themes, but it is unclear if:
- The theme persists correctly across page navigations and session restores
- The initial theme matches the OS
prefers-color-scheme on first visit
- The theme toggle is accessible (aria-label, keyboard navigable)
Fix
- Ensure
next-themes is configured with defaultTheme="system" and enableSystem={true}
- Add
suppressHydrationWarning to <html> to prevent hydration mismatch
- Add
aria-label to the theme toggle button
- Test theme persistence in Playwright
Impact
Low UX / accessibility — theme inconsistencies and accessibility gaps.
Problem
components/theme-provider.tsxwrapsnext-themes, but it is unclear if:prefers-color-schemeon first visitFix
next-themesis configured withdefaultTheme="system"andenableSystem={true}suppressHydrationWarningto<html>to prevent hydration mismatcharia-labelto the theme toggle buttonImpact
Low UX / accessibility — theme inconsistencies and accessibility gaps.