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>
  )};
  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 exists 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>
  )}
  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>
  )};
  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 exists in your tailwind.config.js file. See Create Theme for more details.

Using use-dark-mode hook

In case you're using plain React with Vite or Create React App you can use the use-dark-mode hook to switch between themes.

See the use-dark-mode documentation for more details.

Install use-dark-mode

Install use-dark-mode in your project.

npm install use-dark-mode

Add the current theme to the main element

// App.tsx or App.jsx
import React from "react";
import useDarkMode from "use-dark-mode";

export default function App() {  const darkMode = useDarkMode(false);

  return (
    <main className={`${darkMode.value ? 'dark' : ''} text-foreground bg-background`}>
      <App />
    </main>
  )}
  const darkMode = useDarkMode(false);

  return (
    <main className={`${darkMode.value ? 'dark' : ''} 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 useDarkMode from "use-dark-mode";

export const ThemeSwitcher = () => {  const darkMode = useDarkMode(false);

  return (
    <div>
      <button onClick={darkMode.disable}>Light Mode</button>
      <button onClick={darkMode.enable}>Dark Mode</button>
    </div>
  )};
  const darkMode = useDarkMode(false);

  return (
    <div>
      <button onClick={darkMode.disable}>Light Mode</button>
      <button onClick={darkMode.enable}>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.