暗黑模式
正如我们在 主题 部分中提到的，NextUI 带有两个默认主题 light 和 dark。因此，使用 dark 主题就像将其添加到 html / body 或 main 元素的 className 中一样简单。
这将为整个应用程序启用暗黑模式。然而，许多应用程序需要能够在不同主题之间切换。为此，我们建议使用主题切换库或创建自己的实现。
使用 next-themes
对于使用 Next.js 的应用程序，next-themes 库是一个极佳的选择。它包含了许多功能，可以在主题切换时增强用户体验。
有关更多信息，请参阅 next-themes 文档。
Next.js App Directory 设置
安装 next-themes
在您的项目中安装 next-themes。
添加 next-themes provider
用 next-themes 中的 ThemeProvider 组件包装您的应用程序。
转到您的 app/providers.tsx 或 app/providers.jsx (如果不存在则创建它)，并使用 NextUIProvider 和 next-themes provider 组件包装 Component。
注意：我们使用
class属性来切换主题，这是因为 NextUI 使用className属性。
添加主题切换器
将主题切换器添加到您的应用程序。
注意：您可以使用任何您想要的主题名称，但请确保它存在于您的
tailwind.config.js文件中。有关更多详细信息，请参阅 创建主题。
Next.js Pages 目录设置
安装 next-themes
在您的项目中安装 next-themes。
添加 next-themes provider
前往 pages 目录下的 /_app.js 或 pages/_app.tsx 文件 (如果不存在则创建它)，并使用 NextUIProvider 和 next-themes 提供器组件包裹 Component。
注意：我们使用
class属性来切换主题，这是因为 NextUI 使用className属性。
添加主题切换器
将主题切换器添加到您的应用程序。
注意：您可以使用任何您想要的主题名称，但请确保它存在于您的
tailwind.config.js文件中。有关更多详细信息，请参阅 创建主题。
使用 use-theme Hook
如果您正在使用纯 React 并搭配 Vite 或 Create React App，您可以使用 @nextui-org/use-theme hook 来切换主题。
安装 @nextui-org/use-theme
在您的项目中安装 @nextui-org/use-theme。
将当前主题添加到主元素
添加主题切换器
将主题切换器添加到您的应用程序。
注意：您可以使用任何您想要的主题名称，但请确保它存在于您的
tailwind.config.js文件中。有关更多详细信息，请参阅 创建主题。
