颜色

NextUI 的插件使您能够自定义主题的语义颜色，例如 primary、secondary、success 等。

注意：颜色配置全局应用于所有组件。

默认颜色

NextUI 开箱即用地提供了一套默认调色板，非常适合您还在犹豫不决具体品牌颜色时使用。

这些颜色分为通用颜色和语义颜色。

• 通用颜色：在所有主题中保持一致。
• 语义颜色：根据所选主题进行调整。

通用颜色

通用颜色，如 TailwindCSS 颜色，无论主题如何，都保持一致。

为了避免与 TailwindCSS 颜色冲突，通用颜色最初被禁用，但可以使用 addCommonColors 选项激活。

启用此选项会使用以下颜色补充一些 TailwindCSS 默认颜色

语义颜色

语义颜色会根据主题进行调整，传递含义并增强您的品牌标识。

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

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

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

使用语义颜色

语义颜色可以应用在项目中使用颜色的任何地方，例如文本颜色、边框颜色、背景颜色实用程序等。

Javascript 变量

按如下方式将语义和通用颜色导入到 JavaScript 文件中

CSS 变量

NextUI 使用 --prefix-colorname-shade 的格式为每个语义颜色创建 CSS 变量。默认情况下，前缀为 nextui，但您可以使用 prefix 选项进行更改。

然后您可以在 CSS 文件中使用 CSS 变量。