Bulletproof dark theme detection and switching for Next.js (or other SSR frameworks with minor modifications)
A 'shim'-based Theme detector and switch with zero Flash of Unstyled Content (FOUC).
Our theme detector and switch determines theme settings based on:
- preferences in localStorage,
- prefers-color-scheme user agent,
- followed by a default theme in that order.
We use localStorage for preferences and NOT cookies as cookies will impact your page caching strategy. You'll need to cache variants of every page for both themes as well as detect cookies in your reverse proxy and page cache mechanics.
Using localStorage however, means we need to use an early-detection JavaScript shim combined with suppressHydrationWarning in our document root HTML element.
npm install
npm run dev
# or
yarn install
yarn dev
# or
pnpm install
pnpm devOpen http://localhost:3000 with your browser to see the result.
Infonomic Theme is free software licensed under the MIT license.
For full details, please refer to the LICENSE and COPYRIGHT files in this repository.
Copyright © 2025 Infonomic Company Limited contributors. https://infonomic.io