颜色

HeroUI 的插件允许你为主题自定义语义颜色，例如 primary、secondary、success 等。

注意：颜色配置在所有组件中全局生效。

默认颜色

HeroUI 提供了一套默认的颜色调色板，适用于你尚未决定具体品牌颜色时使用。

这些颜色被划分为 常用颜色 和 语义颜色。

• 常用颜色：跨主题保持一致。
• 语义颜色：随所选主题调整。

常用颜色

常用颜色（如 TailwindCSS 的颜色）无论主题如何，始终保持一致。

为防止与 TailwindCSS 颜色冲突，常用颜色默认被禁用，但可以通过 addCommonColors 选项激活。

启用此选项后，将在 TailwindCSS 默认颜色基础上补充以下颜色：

语义颜色

语义颜色会随主题变化，传达意义并强化品牌识别。

为了获得一个有效的调色板，建议使用 50 到 900 的色值范围。你可以使用诸如 Eva Design System、Smart Watch、Palette 或 Color Box 等工具来生成调色板。

语义颜色应放在 heroui 插件选项中，而不是 TailwindCSS 主题对象中。

更改文档主题以查看语义颜色的效果。

使用语义颜色

语义颜色可应用于项目中任何颜色使用场景，例如文本颜色、边框颜色、背景色工具类等。

Javascript 变量

在 JavaScript 文件中导入语义颜色和常用颜色：

CSS 变量

HeroUI 为每个语义颜色创建 CSS 变量，格式为 --prefix-colorname-shade。默认前缀为 heroui，但你可以通过 prefix 选项进行更改。

然后你可以在 CSS 文件中使用这些 CSS 变量。