✅ next-themes — without flash

Dark mode with next-themes

Switch to dark theme, then refresh the page (Ctrl+R). You will not see any flash.

Why doesn't it flicker?

ThemeProvider injects an inline script into <head> that sets the theme before anything is rendered on screen. The server does not need to know the preference — the script reads it from localStorage before anything appears.

How to test

1. Click the button above to enable dark theme.
2. Refresh the page (Ctrl+R or F5).
3. No flash — the page renders immediately in dark theme.

Compare with the localStorage version

Run the with-localstorage project on port 3000 in parallel to see the difference. Most visible after pnpm build && pnpm start.