主题
主题化是设计用户界面（UI）的关键要素。它可以在您的应用程序中应用一致的美学，增强用户体验并保持视觉统一性。
在 NextUI 中，我们使用 TailwindCSS 插件来促进简单灵活的主题自定义。这个插件基于 tw-colors 插件，由 L-Blondy 开发，允许您自定义应用程序不同组件的配色方案、布局配置等。
什么是主题？
在 NextUI 的上下文中，主题是一组预定义的颜色、布局属性和其他 UI 元素，您可以将其一致地应用于您的应用程序。主题确保视觉一致性，丰富用户体验，并简化应用程序外观的管理和更新。
设置
使用 NextUI 的主题功能的第一步是将 nextui 插件添加到您的 tailwind.config.js 文件中。以下是如何执行此操作的示例
注意：如果您使用 pnpm 和 monorepo 架构，请确保您指向 ROOT
node_modules
用法
将插件添加到您的 tailwind.config.js 文件后，您可以使用任何默认主题（浅色/深色）或自定义主题。以下是如何在 main.jsx 或 main.tsx 中应用这些主题的方法
转到 src 目录，并在 main.jsx 或 main.tsx 中，将以下类名应用于根元素
light表示浅色主题。dark表示深色主题。text-foreground设置文本颜色。bg-background设置背景颜色。
注意：请参阅颜色部分，了解有关颜色类的更多信息。
默认插件选项
nextui 插件提供了一个默认结构。它的概述如下
主题选项
这些是您可以用来对主题应用自定义配置的选项。
嵌套主题
NextUI 支持嵌套主题，允许您对应用程序的不同部分应用不同的主题
基于主题的变体
NextUI 使您能够根据当前活动的主题应用 TailwindCSS 样式。以下是如何执行此操作的示例
API 参考
下表概述了在 NextUI 中使用主题时可以使用的各种属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| prefix | string | css 变量的前缀。 | nextui |
| addCommonColors | boolean | 如果为 true，则常见的 nextui 颜色（例如，“blue”、“green”、“purple”）将替换 TailwindCSS 的默认颜色。 | false |
| defaultTheme | light | dark | 要使用的默认主题。 | 浅色 |
| defaultExtendTheme | light | dark | 要扩展的默认主题。 | 浅色 |
| 布局 | LayoutTheme | 布局定义。 | - |
| 主题 | ConfigThemes | 主题定义。 | - |
