自定义主题

正如前面章节所述，NextUI 提供了两个预定义的主题，light 和 dark。这些主题本身就非常灵活，允许您根据自己的具体偏好或项目需求进行定制。

此外，您可以选择在默认主题的基础上创建自己的主题。每个主题都包含布局标记和颜色标记，旨在方便您的自定义过程。

自定义布局

您可以修改各种布局方面，包括间距单位、字体大小、行高、圆角等等。

布局标记可以全局应用于所有主题，也可以专门应用于选定的主题。

全局布局自定义

假设您需要一个更小的边框半径、更细的边框宽度以及在所有主题中更不透明的禁用元素。您可以通过将以下代码添加到您的 tailwind.config.js 文件中来实现这些更改。

由于 NextUI 组件使用了布局标记，因此修改将反映在所有使用这些标记的组件中。例如，按钮组件使用 radius 标记来设置边框半径，并使用 borderWidth 标记来定义当变体为 bordered 时的边框宽度。

让我们看看更改后 按钮 组件的样子。

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

自定义颜色

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

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

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