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

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

多彩風格的時尚精品圖片

本文假設你已經完成安裝。 若需從頭開始，請參閱官方安裝指南： https://daisyui.com/docs/install/

理解主題的關鍵：不要直接指定顏色

Commandbox 광고

新手最常混淆的地方正是這裡。

錯誤做法 結果
用 Tailwind 直接寫 bg-white、text-slate-900、bg-blue-600 等顏色 即使切換主題，該元素仍保持固定顏色。

換句話說，使用主題時必須 避免硬編碼顏色，而是使用 daisyUI 所提供的 令牌（基於語義的顏色名稱）。

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

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

✅ 正確範例：使用 daisyUI 令牌順應主題

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

關鍵在於「顏色是什麼」不如「它扮演什麼角色」重要。

  • bg-base-100：畫面/卡片的基礎背景
  • text-base-content：基礎文字顏色
  • btn-primary：產品的主要行動（CTA）

主題會根據這些角色自動替換顏色。

那麼「必須」使用什麼？

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）

例如製作「警告橫幅」時，仍以角色為主而非直接寫顏色。

<div class="bg-warning text-warning-content p-4 rounded-box">
  結帳資訊遺漏。
</div>

主題套用：只需一行 data-theme 改變整體氛圍

Commandbox 광고

套用主題其實非常簡單。

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

這一行 data-theme 就能改變 整個應用程式的顏色變數集。

主題不只是「整體」改變：也可按區塊切換

在實際開發中，常會遇到以下需求。

  • 「主頁乾淨，但活動橫幅想更醒目」
  • 「管理頁面使用暗色，使用者頁面使用亮色」

daisyUI 只要在特定 DOM 上加上 data-theme，該區塊就會套用對應主題，且不受巢狀限制。

<html data-theme="dark">
  <body>
    <main class="p-10">
      <h1 class="text-2xl font-bold">整體為暗色</h1>

      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">
        這個區塊永遠是亮色
        <span data-theme="retro" class="ml-2">這個 span 是復古風格</span>
      </section>
    </main>
  </body>
</html>

這種「區塊級」主題切換在實戰中比「主題切換」更常用。

主題管理：只啟用必要的主題

安裝完成後，主題的啟用與關閉在 CSS 的 @plugin "daisyui" { ... } 區塊中設定。

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
  • themes 是以逗號分隔的清單。
  • --default 表示預設主題。
  • --prefersdark 表示當 OS 以暗色模式為首選時使用。

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

@plugin "daisyui" {
  themes: all;
}

但在產品開發中，通常只啟用實際需要的主題，這樣管理更簡單。

差異化重點：把「主題選擇」視為產品策略，而非單純設計

35 個主題不應只被視為「漂亮的皮膚」。我會這樣使用它們。

階段 使用方式
MVP 階段 把主題當作「品牌候選」放置多個，快速驗證 UI/內容是否匹配
運營階段 由於不硬編碼顏色，品牌更新或季節活動只需切換主題即可
團隊協作 即使沒有設計師，只要遵守「角色基礎令牌」，也能保持一致性

核心訊息很簡單。

只要拋棄「直接寫顏色」的習慣，主題就能瞬間升級整個應用。

何時需要自訂主題？

結論是，大多數情況下 35 個預設主題已足夠。它們已經非常成熟，通常只需「選擇一個主題 + 微調」即可投入實務。

但在以下情況下，考慮自訂（覆寫）會更合適。

  • 品牌色彩已明確：公司或服務的代表色已確定，想在 35 個主題中挑選一個，然後在其上覆蓋品牌色。

此時，與其從頭創建新主題，不如只微調 primary、secondary 等關鍵色，這樣既保留了主題的平衡，又能呈現品牌色。

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

下一篇預告

下一篇將討論：

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

下次見！