// the find
pacocoursey/next-themes
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
A small React library that solves dark mode the right way for Next.js apps: a ThemeProvider plus a useTheme hook that reads/writes localStorage, syncs across tabs, and respects prefers-color-scheme. It's aimed at anyone shipping theme switching who is tired of writing their own noflash.js and hydration workarounds.
The flash-of-wrong-theme fix is done properly — it injects a tiny minified script into next/head that sets the attribute before paint, rather than the common hack of a blocking inline script pasted into _document.js. The theme/attribute model is flexible: class or arbitrary data-* attribute, custom value mapping per theme, and it works with plain CSS vars, hardcoded CSS, Tailwind, or styled-components without caring which. Multi-theme support (not just light/dark) and cross-tab sync via storage events are both handled for you, and forcedTheme covers the common case of a marketing page that must ignore user preference. Test coverage is decent for a library this size — dedicated suites for forced-theme, storage-event, switch-theme, and system-theme behavior.
Every consumer has to hand-write the mount-guard dance (useState + useEffect + return null until mounted) to avoid a hydration mismatch — the README shows this boilerplate three separate times instead of the library shipping a built-in NoSSR wrapper or a safe hook variant. You're also on the hook for suppressHydrationWarning on the html element, which is a leaky requirement that's easy to forget and produces a confusing warning when you do. It flatly refuses to support setting the theme attribute on body or any element other than html (stated in the FAQ), so if your CSS architecture assumes body-level theming you're rewriting it. It's effectively a single-maintainer project (pacocoursey) with a script tag running on every themed page load, which is a real bus-factor and supply-chain consideration for something this load-bearing.