Github Stars:
Last Commit: 
Created: 
Overview
The next-themes package is an abstraction for themes in your Next.js app. It provides several key features such as perfect dark mode in just 2 lines of code, system setting with prefers-color-scheme, themed browser UI with color-scheme, support for Next.js 13 appDir, no flash on load (both SSR and SSG), sync theme across tabs and windows, disable flashing when changing themes, force pages to specific themes, class or data attribute selector, and a useTheme hook.
Features
- Perfect dark mode in 2 lines of code: Easily implement dark mode in your Next.js app.
- System setting with prefers-color-scheme: Automatically adjust theme based on the user’s system color scheme.
- Themed browser UI with color-scheme: Apply the theme to built-in UI elements like inputs and buttons.
- Support for Next.js 13 appDir: Compatible with the latest version of Next.js.
- No flash on load: Prevent any flashing of themes during server-side rendering and static site generation.
- Sync theme across tabs and windows: Synchronize the theme selection across multiple browser tabs and windows.
- Disable flashing when changing themes: Prevent any flashing effects when switching between themes.
- Force pages to specific themes: Set specific themes for individual pages in your app.
- Class or data attribute selector: Modify the HTML attribute to represent the active theme.
Installation
To install and use next-themes, follow these steps:
Add the
next-themespackage to your Next.js app by running the following command in your terminal:npm install next-themesIn your app’s custom
_app.jsfile, import theThemeProvidercomponent fromnext-themesand wrap your app with it:// Import the ThemeProvider component import { ThemeProvider } from 'next-themes'; // Wrap your app with the ThemeProvider function MyApp({ Component, pageProps }) { return ( <ThemeProvider> <Component {...pageProps} /> </ThemeProvider> ); } export default MyApp;Optionally, you can add support for dark mode in your layout file (
layout.jsx) by following these steps:a. Create a new file for the providers component (e.g.,
ThemeProviders.jsx) and import theuseThemehook fromnext-themes:import { useTheme } from 'next-themes'; export function ThemeProviders() { const { theme } = useTheme(); return ( <> {/* your providers */} </> ); }b. Import the
ThemeProviderscomponent in your layout file and include it within the<body>tag:import { ThemeProviders } from './ThemeProviders'; function Layout({ children }) { return ( <div> <ThemeProviders /> {/* your layout content */} </div> ); } export default Layout;Ensure that you add
suppressHydrationWarningto the<html>element in yourpages/_document.jsfile to avoid any warnings:// In your _document.js file <html suppressHydrationWarning={true} lang="en">You can now utilize the theme in your HTML and CSS. The default behavior modifies the
data-themeattribute on the<html>element, which you can use for styling. If you prefer using the class attribute, set theattributeproperty of theThemeProvidertoclass.
Summary
In summary, next-themes is a convenient package for implementing themes in your Next.js app. It provides easy dark mode support, system color scheme integration, themed browser UI, and various customization options. By following the installation steps, you can quickly set up and utilize this package to enhance the user experience of your Next.js app.
