自定义主题

HeroUI 提供了 light 和 dark 主题，可以自定义以满足您的需求。您还可以使用布局和颜色令牌基于这些默认值创建自定义主题。

自定义布局

布局令牌允许您自定义间距、排版、边框等 - 可以全局自定义或按主题自定义。

全局布局自定义

您可以通过修改 tailwind.config.js 文件来自定义所有主题的边框半径、边框宽度和禁用不透明度

布局令牌用于所有 HeroUI 组件。例如，Button 组件使用 radius 和 borderWidth 令牌进行样式设置。以下是使用自定义值后的效果

有关可用令牌的更多详细信息，请参阅布局部分。

自定义颜色

现在，假设您希望修改深色主题的主色和焦点色。这可以通过将以下代码添加到您的 tailwind.config.js 文件中来实现。

此修改将影响所有使用 primary 颜色的组件。例如，当变体为 solid 或 ghost 时，Button 组件使用 primary 颜色作为背景颜色。

🎉 搞定！您已成功自定义了默认主题。有关可用语义颜色和颜色令牌的更多详细信息，请参阅颜色部分。