# daisyUI 颜色名称与类 Cheat Sheet：主题切换必备表格

使用 daisyUI 的最大理由是 **轻松实现主题切换**。但当开发者/设计师直接使用 Tailwind 的固定颜色如 `bg-blue-500` 时，这一优势就会被破坏。相反，如果使用 daisyUI 提供的意义化颜色名称（如 `primary`、`base-100`、`error` 等）并写成 `btn-primary`、`bg-base-200`、`text-error` 等 HTML，后续只需更改主题，整个 UI 的色调就会自动跟随。

因此核心在于 **掌握颜色名称与类模式，并将两者组合成标记**。熟练的设计师可能已经凭直觉记住，但初学者或偶尔接触 UI 的后端/全栈开发者，翻阅文档不如把这份 Cheat Sheet 放在旁边更高效。本文正是为此目的，整理了“何时使用哪种颜色名称”与“如何将其组合到类中”的表格。

![机器人开发者与颜色调色板卡](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## 颜色名称（何时使用） {#sec-4d3fa8b26445}

| 颜色名称 | 何时使用（简述） | 典型使用场景 |
| -------- | ---------------- | ------------- |
| `primary` | 品牌主色调 | 主要按钮、核心 CTA |
| `primary-content` | `primary` 上的文字/图标 | primary 按钮文字颜色 |
| `secondary` | 辅助动作/子品牌 | 次级按钮、辅助强调 |
| `secondary-content` | `secondary` 上的文字/图标 | secondary 区域文字颜色 |
| `accent` | 点缀/高亮 | 徽章、链接高亮、强调元素 |
| `accent-content` | `accent` 上的文字/图标 | accent 背景上文字颜色 |
| `neutral` | 中性 UI（暗色调） | 导航、页脚、深色面板 |
| `neutral-content` | `neutral` 上的文字/图标 | neutral 区域文字颜色 |
| `base-100` | 基础页面背景 | 页面/画布背景 |
| `base-200` | 轻微抬升表面 | 卡片、区块背景 |
| `base-300` | 更强区分/层级 | 分隔线、深层面板 |
| `base-content` | `base` 系列上的文字/图标 | 基本文本 |
| `info` | 信息/指导 | 通知横幅、提示 |
| `info-content` | `info` 上的文字/图标 | info 背景上文字颜色 |
| `success` | 成功/正常 | 完成/成功提示 |
| `success-content` | `success` 上的文字/图标 | success 背景上文字颜色 |
| `warning` | 警告/注意 | 警告信息、需确认 |
| `warning-content` | `warning` 上的文字/图标 | warning 背景上文字颜色 |
| `error` | 错误/危险 | 失败/错误/破坏性操作 |
| `error-content` | `error` 上的文字/图标 | error 背景上文字颜色 |

---

## 类模式（颜色名称组合规则） {#sec-5007f90f39f0}

| 目的 | 模式 | 示例 |
| ---- | ---- | ---- |
| 背景色 | `bg-{COLOR}` | `bg-primary`、`bg-base-200` |
| 文字色 | `text-{COLOR}` | `text-base-content`、`text-error` |
| 边框 | `border-{COLOR}` | `border-neutral`、`border-base-300` |
| 渐变起始/中间/结束 | `from- / via- / to-{COLOR}` | `from-primary via-accent to-secondary` |
| 轮廓（聚焦） | `ring-{COLOR}` | `ring-primary` |
| 轮廓偏移 | `ring-offset-{COLOR}` | `ring-offset-base-100` |
| SVG 填充 | `fill-{COLOR}` | `fill-accent` |
| SVG 线条 | `stroke-{COLOR}` | `stroke-neutral-content` |
| 阴影 | `shadow-{COLOR}` | `shadow-primary` |
| 外轮廓 | `outline-{COLOR}` | `outline-info` |
| 分隔线（divide） | `divide-{COLOR}` | `divide-base-300` |
| 表单 accent | `accent-{COLOR}` | `accent-primary` |
| 光标 | `caret-{COLOR}` | `caret-primary` |
| 下划线/装饰 | `decoration-{COLOR}` | `decoration-accent` |
| 占位符 | `placeholder-{COLOR}` | `placeholder-base-content` |

---

## 通过不透明度调节浓度 {#sec-c72e6700b4d3}

| 目的 | 模式 | 示例 |
| ---- | ---- | ---- |
| 轻薄背景 | `bg-{COLOR}/10` | `bg-primary/10`、`bg-success/15` |
| 细腻边框 | `border-{COLOR}/30` | `border-error/30` |
| 轻淡文字 | `text-{COLOR}/70` | `text-base-content/70` |
| 悬停强度 | `hover:bg-{COLOR}/80` | `hover:bg-primary/80` |

> 想调节颜色浓度时，只需在类名后加 `/数字(百分比)`。覆盖上述颜色名称以转换颜色是可以的，但在 HTML 中添加除上述颜色名称之外的颜色会破坏设计统一性，并在主题切换时导致颜色失衡，故不推荐。

---

**相关阅读**：

- [daisyUI 主题：35 色调色板让你摆脱颜色烦恼](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)
- [Tailwind CSS 插件 daisyUI 介绍：仅用类快速构建 UI](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)