Dark mode

As we mentioned before in the Theme section NextUI comes with two default themes lightand dark. So using the dark theme is as simple as adding it to the className of the html / body or main element.

// main.tsx or main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import {NextUIProvider} from "@nextui-org/react";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <NextUIProvider>
      <main className="dark text-foreground bg-background">
        <App />
      </main>
    </NextUIProvider>
  </React.StrictMode>,
);

This will enable the dark mode for the whole application. However, many applications require the capability to switch between different themes. For this purpose, we recommend using a theme switch library or creating your own implementation.

Using next-themes

For applications using Next.js, the next-themes library is an excellent choice. It comes packed with features that enhance the user experience when transitioning between themes.

For more information, refer to the next-themes documentation.

Next.js App Directory Setup

Install next-themes

Install next-themes in your project.

npm install next-themes

Add next-themes provider

Wrap your app with the ThemeProvider component from next-themes.

Go to your app/providers.tsx or app/providers.jsx (create it if it doesn't exist) and wrap the Component with the NextUIProvider and the next-themes provider components.

// app/providers.tsx
"use client";

import {NextUIProvider} from '@nextui-org/react'
import {ThemeProvider as NextThemesProvider} from "next-themes";

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <NextUIProvider>
      <NextThemesProvider attribute="class" defaultTheme="dark">
        {children}
      </NextThemesProvider>
    </NextUIProvider>
  )
}

Note: We're using the class attribute to switch between themes, this is because NextUI uses the className attribute.

Add the theme switcher

Add the theme switcher to your app.

// app/components/ThemeSwitcher.tsx
"use client";

import {useTheme} from "next-themes";
import { useEffect, useState } from "react";

export function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  if(!mounted) return null

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
};

Note: You can use any theme name you want, but make sure it exits in your tailwind.config.js file. See Create Theme for more details.

Next.js Pages Directory Setup

Install next-themes

Install next-themes in your project.

npm install next-themes

Add next-themes provider

Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and wrap the Component with the NextUIProvider and the next-themes provider components.

// pages/_app.js
import {NextUIProvider} from "@nextui-org/react";
import {ThemeProvider as NextThemesProvider} from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <NextThemesProvider attribute="class" defaultTheme="dark">
        <Component {...pageProps} />
      </NextThemesProvider>
    </NextUIProvider>
  )
}

export default MyApp;

Note: We're using the class attribute to switch between themes, this is because NextUI uses the className attribute.

Add the theme switcher

Add the theme switcher to your app.

// components/ThemeSwitcher.tsx
import {useTheme} from "next-themes";

export const ThemeSwitcher = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
};

Note: You can use any theme name you want, but make sure it exits in your tailwind.config.js file. See Create Theme for more details.

Using use-theme hook

In case you're using plain React with Vite or Create React App you can use the @nextui-org/use-theme hook to switch between themes.

Install @nextui-org/use-theme

Install @nextui-org/use-theme in your project.

npm install @nextui-org/use-theme

Add the current theme to the main element

// App.tsx or App.jsx
import React from "react";
import {useTheme} from "@nextui-org/use-theme";

export default function App() {
  const {theme} = useTheme();

  return (
    <main className={`${theme} text-foreground bg-background`}>
      <App />
    </main>
  )
}

Add the theme switcher

Add the theme switcher to your app.

// 'use client'; // uncomment this line if you're using Next.js App Directory Setup

// components/ThemeSwitcher.tsx
import {useTheme} from "@nextui-org/use-theme";

export const ThemeSwitcher = () => {
  const {setLightTheme, setDarkTheme} = useTheme();

  return (
    <div>
      <button onClick={setLightTheme}>Light Mode</button>
      <button onClick={setDarkTheme}>Dark Mode</button>
    </div>
  )
};

Alternative, you can use toggleTheme

// 'use client'; // uncomment this line if you're using Next.js App Directory Setup

// components/ThemeSwitcher.tsx
import {useTheme} from "@nextui-org/use-theme";

export const ThemeSwitcher = () => {
  const {toggleTheme} = useTheme();

  return (
    <div>
      <button onClick={toggleTheme}>
        {isLightTheme ? "Light Mode" : "Dark Mode"}
      </button>
    </div>
  )
};

Note: You can use any theme name you want, but make sure it exits in your tailwind.config.js file. See Create Theme for more details.