Revision Ver-1

daisyUI 主題：35 色調主題讓你告別顏色煩惱

daisyUI 的主題不只是「支援暗色模式」而已。\n35 個預設的色彩組合（主題）已經被設計成產品級別，並且可以將這些色彩一致地套用到整個應用程式。

多彩風格的時尚精品圖片

\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 所提供的 令牌（基於語義的顏色名稱）。

❌ 錯誤範例：硬編碼忽略主題

<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` 改變整體氛圍

套用主題其實非常簡單。

<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">整體為暗色</h1>\n\n      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">\n        這個區塊永遠是亮色\n        <span data-theme="retro" class="ml-2">這個 span 是復古風格</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 以暗色模式為首選時使用。

如果想「先開啟全部再挑選」，可以這樣寫。

@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 等關鍵色，這樣既保留了主題的平衡，又能呈現品牌色。

如何實際覆寫 primary、secondary，將在下一篇文章中以程式碼示範。

下一篇預告

下一篇將討論：

「保持主題，僅微調元件」的實戰模式
如何自訂主題
daisyUI 支援的顏色變數與類別的速查表

下次見！

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

daisyUI 主題：35 色調色盤讓你告別顏色煩惱 [ r1 ]