暗模式

如我们在主题部分中提到的，NextUI 带有两种默认主题 light和 dark。因此，使用 dark 主题就像将其添加到 className 的 html / body 或 main 元素一样简单。

// 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 应用目录设置

安装 next-themes

在你的项目中安装 next-themes。

npm install next-themes

添加 next-themes 提供程序

使用 next-themes 中的 ThemeProvider 组件包装你的应用。

转到你的 app/providers.tsx 或 app/providers.jsx（如果不存在，则创建它），并使用 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 页面目录设置

安装 next-themes

在你的项目中安装 next-themes。

npm install next-themes

添加 next-themes 提供程序

转到页面/_app.js 或 pages/_app.tsx（如果不存在，则创建它），并用 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 文件中。有关更多详细信息，请参阅创建主题。