nextjs-themes
v4.0.6TypeScript
Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.
ReactReact 18React 19Next.jsNext.js 14Next.js 15React server componentsCustomizableCompatibilityFrontend development
0/weekUpdated 1 years agoMPL-2.0Unpacked: 57.1 KB
Published by Mayank Kumar Chaudhari
npm install nextjs-themesNext.js Themes 
     !npm bundle size 
Version 3 Short Notes:
Version 3.0 brings minor API changes along with major performance improvements and fixes. We have minimized changes to existing APIs.
Note: react18-themes will now be maintained as nextjs-themes, as server-specific APIs are no longer needed.
🤟 👉 Unleash the Power of React Server Components
- ✅ Perfect dark mode in 2 lines of code
- ✅ Fully Treeshakable (import from nextjs-themes/client/component)
- ✅ Full TypeScript Support
- ✅ Unleash the full power of React 18 Server components
- ✅ No flash on load (both SSR and SSG)
> Exampand following to see more features.
Motivation and Key Features:
This project was inspired by next-themes. Unlike next-themes, nextjs-themes doesn't require wrapping everything in a provider, allowing you to take full advantage of React 18 Server Components. Additionally, it offers more features and control over your app's theming.
- ✅ Perfect dark mode in 2 lines of code
- ✅ Fully Treeshakable (import from nextjs-themes/client/component)
- ✅ Designed for excellence
- ✅ Full TypeScript Support
- ✅ Unleash the full power of React 18 Server components
- ✅ System setting with prefers-color-scheme
- ✅ Themed browser UI with color-scheme
- ✅ Support for Next.js 13 & Next.js 14 appDir
- ✅ No flash on load (for all - SSG, SSR, ISG, Server Components)
- ✅ Sync theme across tabs and windows
- ✅ Disable flashing when changing themes
- ✅ Force pages to specific themes
- ✅ Class and data attribute selector
- ✅ Manipulate theme via useTheme hook
- ✅ Documented with Typedoc (Docs)
- ✅ Use combinations of [data-th=""] and [data-color-scheme=""] for dark/light variants of themes
- ✅ Use [data-csp=""] to style based on colorSchemePreference.
- ✅ Compatible with Tailwind CSS, StyledComponents, emotion, Material UI, ...
> Check out the live example.
Getting Started
> See Getting Started
> Want Lite Version?   
> In case you are using r18gs in your project, you may use lite version which requires r18gs as a peerDependency.
$3
In tailwind.config.js, set the dark mode property to class:
``js`
// tailwind.config.js
module.exports = {
darkMode: "class",
};
⚡🎉Ready to use dark mode in Tailwind!
> Caution: Your class must be "dark", which is the default value used in this library. Tailwind requires the class name "dark" for dark-theme.
Use dark-mode specific classes:
`tsx`
Migration
> Refer to the migration guide.
Docs
$3
Want a hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript
FAQ
Do I need to use CSS variables with this library?
No. You can hard code values for every class:
`css
.my-class {
color: #555;
}
[data-theme="dark"] .my-class {
color: white;
}
`
Why is resolvedTheme and resolvedColorScheme necessary?
To reflect the System theme preference and forced theme/colorScheme pages in your UI. For instance, buttons or dropdowns indicating the current colorScheme should say "system" when the System colorScheme preference is active.
resolvedTheme is useful for modifying behavior or styles at runtime:
`js
const { resolvedTheme, resolvedColorScheme } = useTheme();
const background = getBackground(resolvedTheme);
`
Without
License
This library is licensed under the MPL-2.0 open-source license.
> Please consider enrolling in our courses or sponsoring our work.
with 💖 by Mayank Kumar Chaudhari