颜色

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 变量。