Revision Ver-1

daisyUI 主题：用 35 种配色方案彻底解决色彩烦恼

daisyUI 的主题不仅仅是“支持暗黑模式”。\n它提供了 35 种预先设计好的配色方案（主题），并且可以让你把这些配色方案一致地应用到整个应用。

多彩风格的时尚精品店图片

\n
本文假设你已经完成安装。\n如需从安装开始，请先查看官方指南：\nhttps://daisyui.com/docs/install/
\n

理解主题的核心：不要直接指定颜色

初学者最容易混淆的点就在这里。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n

错误做法	结果
用 Tailwind 直接写 `bg-white`、`text-slate-900`、`bg-blue-600` 等颜色	主题切换后，该元素仍保持固定颜色

也就是说，想要使用主题，不要硬编码颜色，而是使用 daisyUI 提供的基于语义的颜色标记（token）。

❌ 错误示例：硬编码忽略主题

<div class="bg-white text-slate-900 p-6 rounded-2xl">\n  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>\n</div>\n

✅ 正确示例：使用 daisyUI 标记顺应主题

<div class="bg-base-100 text-base-content p-6 rounded-box">\n  <button class="btn btn-primary">Save</button>\n</div>\n

这里重要的是“是什么颜色”，而不是“颜色值”。

bg-base-100：页面/卡片的基础背景
text-base-content：基础文字颜色
btn-primary：产品的主要操作（CTA）

主题会根据这些角色自动替换颜色。

那么，必须使用什么？

daisyUI 主题的正确使用方式，建议养成以下两种（或两者兼用）的习惯。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

用法	示例
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`）

例如，创建“警告横幅”时，也不要直接写颜色，而是用角色表达。

<div class="bg-warning text-warning-content p-4 rounded-box">\n  付款信息缺失。\n</div>\n

主题应用：只需一行 `data-theme` 改变整体氛围

主题的应用 surprisingly 简单。

<html data-theme="cupcake">\n  <body>\n    <div class="bg-base-100 text-base-content min-h-screen p-10">\n      <button class="btn btn-primary">Primary</button>\n    </div>\n  </body>\n</html>\n

这行 data-theme 就会切换整个应用的颜色变量集。

主题不仅是“整体”切换：也可以按区块切换

在产品开发中，常会遇到以下需求。

“主页面干净，但活动横幅想更醒目”
“管理后台是暗色，用户页面是亮色”

daisyUI 只需在特定 DOM 上添加 data-theme，该区域才会切换主题。层叠也没有限制。

<html data-theme="dark">\n  <body>\n    <main class="p-10">\n      <h1 class="text-2xl font-bold">整体是 dark</h1>\n\n      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">\n        这一节始终是 light\n        <span data-theme="retro" class="ml-2">这一 span 是 retro</span>\n      </section>\n    </main>\n  </body>\n</html>\n

此功能在实际项目中往往比“主题切换”更常用。

主题管理：只开启必要的主题

安装完成后，主题的开启与关闭在 CSS 的 @plugin "daisyui" { ... } 块中管理。

@import "tailwindcss";\n\n@plugin "daisyui" {\n  themes: light --default, dark --prefersdark, cupcake;\n}\n

themes 是逗号分隔的列表。
--default 是默认主题。
--prefersdark 在 OS 处于暗色模式（prefers-color-scheme: dark）时使用。

如果想先开启所有主题再挑选，也可以这样。

@plugin "daisyui" {\n  themes: all;\n}\n

但在产品中，只开启需要的主题更易于维护。

差异化点：把“主题选择”视为产品策略，而非单纯的设计

35 种主题不应仅仅是“漂亮的皮肤”。我把主题当作以下三种使用场景。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

阶段	用法
MVP 阶段	将主题视为“品牌候选”，快速验证 UI/内容是否匹配
运营阶段	由于不硬编码颜色，品牌更新/季节活动只需切换主题即可
团队协作	即使没有设计师，只要遵循“基于角色的标记”，也能保持一致性

核心要点是：

\n
只要摆脱“直接写颜色”的习惯，主题就能瞬间升级整个应用。
\n

何时需要自定义主题？

直接说，大多数情况下 35 种默认主题已足够。它们的完成度很高，通常只需“选一个默认主题 + 微调”即可投入生产。

但在以下情况下，考虑自定义（覆盖）是有意义的。

品牌色已确定：公司/服务的主色已固定，想在 35 种主题中挑选一个，然后覆盖主色。

此时，与其从零开始创建新主题，不如仅微调 primary、secondary，即可让按钮/链接/CTA 等核心交互呈现品牌色，同时保留其余背景/文字/状态色的平衡。

如何实际覆盖 primary、secondary，将在下一篇文章中配合代码详细说明。

下期预告

下一篇将讨论：

“保持主题不变，只微调组件”的实战模式
如何自定义主题
daisyUI 支持的颜色变量与类的速查表

下次再见！

', '/media/editor_temp/6/80ae2ebd-04c4-4f84-b0d2-15666a888080.png')

daisyUI 主题：用 35 种配色方案彻底解决色彩烦恼 [ r1 ]