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 放在旁边更高效。本文正是为此目的，整理了“何时使用哪种颜色名称”与“如何将其组合到类中”的表格。
颜色名称（何时使用）
| 颜色名称 | 何时使用（简述） | 典型使用场景 |
|---|---|---|
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 背景上文字颜色 |
类模式（颜色名称组合规则）
| 目的 | 模式 | 示例 |
|---|---|---|
| 背景色 | 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 |
通过不透明度调节浓度
| 目的 | 模式 | 示例 |
|---|---|---|
| 轻薄背景 | 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 中添加除上述颜色名称之外的颜色会破坏设计统一性，并在主题切换时导致颜色失衡，故不推荐。
相关阅读：
目前没有评论。