主题
主题化允许您在整个应用程序中保持一致的外观和风格。 HeroUI 通过基于 tw-colors 的 TailwindCSS 插件提供主题定制，使您能够轻松自定义颜色、布局和其他 UI 元素。
什么是主题？
主题是一组预定义的颜色和布局属性，可确保整个应用程序的视觉一致性。 它简化了管理和更新应用程序外观的过程。
设置
使用 HeroUI 主题功能的第一步是将 heroui 插件添加到您的 tailwind.config.js 文件中。 以下是如何执行此操作的示例
注意：如果您正在使用 pnpm 和 monorepo 架构，请确保您指向 ROOT
node_modules
用法
将插件添加到您的 tailwind.config.js 文件后，您可以使用任何默认主题（light/dark）或自定义主题。 以下是如何在您的 main.jsx 或 main.tsx 中应用这些主题的方法
转到 src 目录，并在 main.jsx 或 main.tsx 中，将以下类名应用于根元素
light用于浅色主题。dark用于深色主题。text-foreground用于设置文本颜色。bg-background用于设置背景颜色。
注意：请参阅颜色部分，了解有关颜色类的更多信息。
默认插件选项
heroui 插件提供默认结构。 其结构如下
主题选项
这些是可用于将自定义配置应用于主题的选项。
嵌套主题
HeroUI 支持嵌套主题，允许您将不同的主题应用于应用程序的不同部分
基于主题的变体
HeroUI 使您能够根据当前活动主题应用 TailwindCSS 样式。 以下是如何执行此操作的示例
API 参考
下表概述了在 HeroUI 中使用主题时可以使用的各种属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| prefix | string | css 变量的前缀。 | heroui |
| addCommonColors | boolean | 如果为 true，则通用的 heroui 颜色（例如“blue”、“green”、“purple”）将替换 TailwindCSS 默认颜色。 | false |
| defaultTheme | light | dark | 要使用的默认主题。 | light |
| defaultExtendTheme | light | dark | 要扩展的默认主题。 | light |
| layout | LayoutTheme | 布局定义。 | - |
| themes | ConfigThemes | 主题定义。 | - |
