# daisyUI 主题：用 35 种配色方案彻底解决色彩烦恼
daisyUI 的主题不仅仅是“支持暗黑模式”。
**它提供了 35 种预先设计好的配色方案（主题）**，并且可以让你把这些配色方案**一致地应用到整个应用**。
> 本文假设你已经完成安装。
> 如需从安装开始，请先查看官方指南：
>
---
## 理解主题的核心：**不要直接指定颜色** {#sec-648a5757ecf6}
初学者最容易混淆的点就在这里。
| 错误做法 | 结果 |
|------------|------|
| 用 Tailwind 直接写 `bg-white`、`text-slate-900`、`bg-blue-600` 等颜色 | 主题切换后，该元素仍保持**固定颜色** |
也就是说，想要使用主题，**不要硬编码颜色**，而是使用 daisyUI 提供的**基于语义的颜色标记（token）**。
### ❌ 错误示例：硬编码忽略主题 {#sec-0b5438bac864}
```html
```
### ✅ 正确示例：使用 daisyUI 标记顺应主题 {#sec-e1146fcf48a6}
```html
```
这里重要的是“是什么颜色”，而不是“颜色值”。
- `bg-base-100`：页面/卡片的基础背景
- `text-base-content`：基础文字颜色
- `btn-primary`：产品的主要操作（CTA）
主题会根据这些角色自动替换颜色。
---
## 那么，**必须**使用什么？ {#sec-7cfab9901bed}
daisyUI 主题的正确使用方式，建议养成以下两种（或两者兼用）的习惯。
| 用法 | 示例 |
|--------|------|
| **daisyUI 组件类** | `btn`、`btn-primary`、`alert`、`badge`、`card`、`navbar`、`input` … |
| **daisyUI 颜色标记类（基于语义）** | 基础背景/文字：`bg-base-100`、`bg-base-200`、`bg-base-300`、`text-base-content`
重点色：`bg-primary`、`text-primary`、`bg-secondary`、`bg-accent`、`bg-neutral`
状态色：`bg-info`、`bg-success`、`bg-warning`、`bg-error`（以及对应的 `*-content`） |
例如，创建“警告横幅”时，也不要直接写颜色，而是用角色表达。
```html
付款信息缺失。
```
---
## 主题应用：只需一行 `data-theme` 改变整体氛围 {#sec-4d6308cbf561}
主题的应用 surprisingly 简单。
```html
```
这行 `data-theme` 就会**切换整个应用的颜色变量集**。
---
## 主题不仅是“整体”切换：也可以按区块切换 {#sec-e0f142807b1a}
在产品开发中，常会遇到以下需求。
- “主页面干净，但活动横幅想更醒目”
- “管理后台是暗色，用户页面是亮色”
daisyUI 只需在特定 DOM 上添加 `data-theme`，**该区域才会切换主题**。层叠也没有限制。
```html
整体是 dark
这一节始终是 light
这一 span 是 retro
```
此功能在实际项目中往往比“主题切换”更常用。
---
## 主题管理：只开启必要的主题 {#sec-ab5d0648dae0}
安装完成后，主题的开启与关闭在 CSS 的 `@plugin "daisyui" { ... }` 块中管理。
```css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
- `themes` 是**逗号分隔的列表**。
- `--default` 是默认主题。
- `--prefersdark` 在 OS 处于暗色模式（`prefers-color-scheme: dark`）时使用。
如果想先开启所有主题再挑选，也可以这样。
```css
@plugin "daisyui" {
themes: all;
}
```
但在产品中，**只开启需要的主题**更易于维护。
---
## 差异化点：把“主题选择”视为产品策略，而非单纯的设计 {#sec-612655295e82}
35 种主题不应仅仅是“漂亮的皮肤”。我把主题当作以下三种使用场景。
| 阶段 | 用法 |
|------|-----------|
| **MVP 阶段** | 将主题视为“品牌候选”，快速验证 UI/内容是否匹配 |
| **运营阶段** | 由于不硬编码颜色，品牌更新/季节活动只需**切换主题**即可 |
| **团队协作** | 即使没有设计师，只要遵循“基于角色的标记”，也能保持一致性 |
核心要点是：
> **只要摆脱“直接写颜色”的习惯，主题就能瞬间升级整个应用。**
---
## 何时需要自定义主题？ {#sec-67726d664b47}
直接说，**大多数情况下 35 种默认主题已足够**。它们的完成度很高，通常只需“选一个默认主题 + 微调”即可投入生产。
但在以下情况下，考虑自定义（覆盖）是有意义的。
- **品牌色已确定**：公司/服务的主色已固定，想在 35 种主题中挑选一个，然后**覆盖主色**。
此时，与其从零开始创建新主题，不如**仅微调 `primary`、`secondary`**，即可让按钮/链接/CTA 等核心交互呈现品牌色，同时保留其余背景/文字/状态色的平衡。
如何实际覆盖 `primary`、`secondary`，将在**下一篇文章**中配合代码详细说明。
---
## 下期预告 {#sec-b349bf2c99ab}
下一篇将讨论：
- “保持主题不变，只微调组件”的实战模式
- 如何自定义主题
- daisyUI 支持的颜色变量与类的速查表
下次再见！