暗色模式
HeroUI 支持 light 与 dark 两种主题。要启用暗色模式，只需在根元素（html、body 或 main）上添加 dark 类。
这将全局启用暗色模式。若需要主题切换功能，可以使用主题库或自行实现。
使用 next-themes
对于 Next.js 应用，next-themes 提供无缝主题切换功能。
如需了解更多信息，请参阅 next-themes 文档。
Next.js App 目录设置
安装 next-themes
在您的项目中安装 next-themes。
添加 next-themes 提供者
将您的应用包裹在 next-themes 的 ThemeProvider 组件内。前往 app/providers.tsx 或 app/providers.jsx（若不存在请创建）并将 Component 包裹在 HeroUIProvider 与 next-themes 提供者组件中。
注意：我们使用 class 属性来切换主题，这是因为 HeroUI 使用 className 属性。
添加主题切换器
注意：您可以使用任何想要的主题名称，但请确保它已在您的
tailwind.config.js文件中定义。请参阅 创建主题。
Next.js Pages 目录设置
安装 next-themes
在您的项目中安装 next-themes。
添加 next-themes 提供者
前往 pages/_app.js 或 pages/_app.tsx（若不存在请创建）并将 Component 包裹在 HeroUIProvider 与 next-themes 提供者组件中。
注意：我们使用 class 属性来切换主题，这是因为 HeroUI 使用 className 属性。
添加主题切换器
注意：您可以使用任何想要的主题名称，但请确保它已在您的
tailwind.config.js文件中定义。请参阅 创建主题。
使用 use-theme 钩子
如果您在使用纯 React（Vite 或 Create React App），可以使用 @heroui/use-theme 钩子在主题之间切换。
安装 @heroui/use-theme
在您的项目中安装 @heroui/use-theme。
添加主题切换器
注意：您可以使用任何想要的主题名称，但请确保它已在您的
tailwind.config.js文件中定义。请参阅 创建主题 以获取更多详细信息。
