自定义主题

HeroUI 提供 light 和 dark 两种主题，您可以根据自己的需求进行定制。您还可以基于这些默认主题创建自定义主题，使用 Layout 和 Color 令牌。

布局自定义

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

全局布局自定义

您可以通过修改 tailwind.config.js 文件，统一自定义所有主题的圆角、边框宽度和禁用透明度：

布局令牌在所有 HeroUI 组件中均被使用。例如，Button 组件会使用 radius 与 borderWidth 令牌进行样式设置。下面是使用自定义值后的效果：

查看 Layout 部分，了解可用令牌的更多细节。

颜色自定义

现在，假设您想修改暗色主题的主色与焦点色。只需在 tailwind.config.js 文件中添加以下代码即可：

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

🎉 就是这样！您已成功定制默认主题。查看 Colors 部分，了解可用语义颜色与颜色令牌的更多细节。