Next Themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

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-themes package to your Next.js app by running the following command in your terminal:
```
npm install next-themes
```

In your app’s custom _app.js file, import the ThemeProvider component from next-themes and 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 the useTheme hook from next-themes:

import { useTheme } from 'next-themes';

export function ThemeProviders() {
  const { theme } = useTheme();

  return (
    <>
      {/* your providers */}
    </>
  );
}

b. Import the ThemeProviders component 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 suppressHydrationWarning to the <html> element in your pages/_document.js file 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-theme attribute on the <html> element, which you can use for styling. If you prefer using the class attribute, set the attribute property of the ThemeProvider to class.

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.

Next Themes

Categories

Overview

Features

Installation

Summary