Newsletter
Join the Community
Subscribe to our newsletter for the latest news and updates
Dark mode and theming library for Next.js 13/14 with React Server Components support, no provider wrapper, no flash on load.
The nextjs-themes library is a theming and dark-mode solution for Next.js 13 and 14 apps that uses React 18 Server Components and eliminates the need for a provider wrapper around the entire application.
nextjs-themes is an open-source npm package for adding dark mode and multi-theme support to Next.js applications built with the app directory (appDir). It consumes your theme preference (system, light, dark) and produces theme state, class names, and data attributes on the document, and exposes a useTheme hook for runtime control. The library is created by Mayank Kumar Chaudhari under the react18-tools organization and is licensed under MPL-2.0.
nextjs-themes/client/component to keep bundle size small; a lite version (nextjs-themes-lite) is also available with r18gs as a peer dependency.data-th, data-color-scheme, and data-csp attributes for flexible dark/light and color-scheme styling.prefers-color-scheme and syncs theme across tabs and windows.darkMode: "class" in tailwind.config.js.dark: variant with the default "dark" class.darkMode: "class" in Tailwind and use dark: classes — and the library handles theme switching.data-th and data-color-scheme attributes to write CSS for light/dark and color-scheme combinations.useTheme hook with resolvedTheme and resolvedColorScheme to change styles at runtime based on the resolved system preference.No. You can hard-code values for every class, as shown in the README: write normal CSS selectors and then override them with [data-theme="dark"] .my-class rules.
resolvedTheme and resolvedColorScheme necessary?They reflect the System theme preference so your UI can show "system" when that preference is active. resolvedTheme also lets you adjust behavior or style at runtime, for example by choosing a background color based on the resolved theme.
Yes. The library is open-source and released under the MPL-2.0 license. You can also sponsor the author through GitHub Sponsors.
nextjs-themes was inspired by next-themes but does not require wrapping your entire application in a provider, which makes it compatible with React Server Components. It also adds selectors like data-csp and color-scheme theming.
The library supports Next.js 13 and Next.js 14 with the appDir feature. Version 3.0 introduced minor API changes along with performance improvements and fixes, and a migration guide is provided in the repository.
nextjs-themes is free and open source under the MPL-2.0 license. The author offers paid courses and sponsorship, but the package itself has no pricing tiers.
