ダークモード

テーマのセクションで前述したように、NextUIにはlightとdarkの2つのデフォルトテーマが付属しています。したがって、darkテーマを使用するには、html/ bodyまたはmain要素のclassNameに追加するだけです。

// 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>,
);

これにより、アプリケーション全体のダークモードが有効になります。ただし、多くのアプリケーションでは、異なるテーマを切り替える機能が必要です。この目的のために、テーマ切り替えライブラリを使用するか、独自の実装を作成することをお勧めします。

next-themesの使用

Next.jsを使用するアプリケーションの場合、next-themesライブラリは優れた選択肢です。テーマを切り替える際にユーザーエクスペリエンスを向上させる機能が満載です。

詳細については、next-themesのドキュメントを参照してください。

Next.js App ディレクトリの設定

next-themes のインストール

プロジェクトに next-themes をインストールします。

npm install next-themes

next-themes プロバイダーの追加

next-themes の ThemeProvider コンポーネントでアプリをラップします。

app/providers.tsx または app/providers.jsx (存在しない場合は作成) に移動し、Component を NextUIProvider および next-themes プロバイダーコンポーネントでラップします。

// 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>
  )
}

注: テーマを切り替えるために class 属性を使用しています。これは、NextUI が className 属性を使用しているためです。

テーマスイッチャーの追加

テーマスイッチャーをアプリに追加します。

// 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>
  )
};

注: 任意のテーマ名を使用できますが、tailwind.config.js ファイルに存在することを確認してください。詳細については、テーマの作成を参照してください。

Next.js Pages ディレクトリの設定

next-themes のインストール

プロジェクトに next-themes をインストールします。

npm install next-themes

next-themes プロバイダーの追加

pages/_app.js または pages/_app.tsx (存在しない場合は作成) に移動し、Component を NextUIProvider および next-themes プロバイダーコンポーネントでラップします。

// 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;

注: テーマを切り替えるために class 属性を使用しています。これは、NextUI が className 属性を使用しているためです。

テーマスイッチャーの追加

テーマスイッチャーをアプリに追加します。

// 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>
  )
};

注: 任意のテーマ名を使用できますが、tailwind.config.js ファイルに存在することを確認してください。詳細については、テーマの作成を参照してください。

use-dark-mode フックの使用

Vite または Create React App でプレーンな React を使用している場合は、use-dark-mode フックを使用してテーマを切り替えることができます。

詳細については、use-dark-mode のドキュメントを参照してください。

use-dark-mode のインストール

プロジェクトに use-dark-mode をインストールします。

npm install use-dark-mode

メイン要素への現在のテーマの追加

// 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>
  )
}

テーマスイッチャーの追加

テーマスイッチャーをアプリに追加します。

// '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>
  )
};

注: 任意のテーマ名を使用できますが、tailwind.config.js ファイルに存在することを確認してください。詳細については、テーマの作成を参照してください。