主题

主题化允许您在整个应用程序中保持一致的外观和感觉。HeroUI 通过基于 tw-colors 的 TailwindCSS 插件提供主题定制，使您能够轻松自定义颜色、布局及其他 UI 元素。

什么是主题？

主题是一组预定义的颜色和布局属性，能确保应用程序在各处保持视觉一致性。它简化了应用程序界面管理和更新。

安装与设置

首先，要使用 HeroUI 的主题功能，请在 tailwind.config.js 文件中添加 heroui 插件。以下示例展示了如何操作：

注意：如果你使用 pnpm 和 monorepo 架构，请确保你指向的是根目录下的 node_modules

用法

在将插件添加到 tailwind.config.js 后，你可以使用默认主题（light/dark）或自定义主题。下面展示如何在 main.jsx 或 main.tsx 中应用这些主题：

进入 src 目录，在 main.jsx 或 main.tsx 中，对根元素添加以下类名：

• light 为浅色主题。
• dark 为深色主题。
• text-foreground 用来设置文字颜色。
• bg-background 用来设置背景颜色。

注意：请参阅 Colors 章节，了解更多关于颜色类的信息。

默认插件选项

heroui 插件提供了默认结构，如下所示：

主题选项

以下是你可以用来为主题应用自定义配置的选项。

嵌套主题

HeroUI 支持嵌套主题，允许你在应用程序的不同部分使用不同的主题：

基于主题的变体

HeroUI 让你可以根据当前激活的主题应用 TailwindCSS 样式。下面是实现示例：

API 参考

下面的表格概述了在 HeroUI 中使用主题时可用的各种属性：

类型

ConfigThemes

LayoutTheme

ThemeColors