# daisyUI 主題：35 色調主題讓你告別顏色煩惱
daisyUI 的主題不只是「支援暗色模式」而已。
**35 個預設的色彩組合（主題）** 已經被設計成產品級別，並且可以將這些色彩一致地套用到整個應用程式。
> 本文假設你已經完成安裝。
> 若需從頭開始，請參閱官方安裝指南：
>
---
## 理解主題的關鍵：**不要直接指定顏色** {#sec-648a5757ecf6}
新手最常混淆的地方正是這裡。
| 錯誤做法 | 結果 |
|------------|------|
| 用 Tailwind 直接寫 `bg-white`、`text-slate-900`、`bg-blue-600` 等顏色 | 即使切換主題，該元素仍保持固定顏色。 |
換句話說，使用主題時必須 **避免硬編碼顏色**，而是使用 daisyUI 所提供的 **令牌（基於語義的顏色名稱）**。
### ❌ 錯誤範例：硬編碼忽略主題 {#sec-0b5438bac864}
```html
```
### ✅ 正確範例：使用 daisyUI 令牌順應主題 {#sec-e1146fcf48a6}
```html
```
關鍵在於「顏色是什麼」不如「它扮演什麼角色」重要。
- `bg-base-100`：畫面/卡片的基礎背景
- `text-base-content`：基礎文字顏色
- `btn-primary`：產品的主要行動（CTA）
主題會根據這些角色自動替換顏色。
---
## 那麼「必須」使用什麼？ {#sec-7cfab9901bed}
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`） |
例如製作「警告橫幅」時，仍以角色為主而非直接寫顏色。
```html
結帳資訊遺漏。
```
---
## 主題套用：只需一行 `data-theme` 改變整體氛圍 {#sec-4d6308cbf561}
套用主題其實非常簡單。
```html
```
這一行 `data-theme` 就能改變 **整個應用程式的顏色變數集**。
---
## 主題不只是「整體」改變：也可按區塊切換 {#sec-e0f142807b1a}
在實際開發中，常會遇到以下需求。
- 「主頁乾淨，但活動橫幅想更醒目」
- 「管理頁面使用暗色，使用者頁面使用亮色」
daisyUI 只要在特定 DOM 上加上 `data-theme`，該區塊就會套用對應主題，且不受父層影響。
```html
整體為暗色
```
這種「區塊級」主題切換在實戰中比「主題切換」更常用。
---
## 主題管理：只啟用必要的主題 {#sec-ab5d0648dae0}
安裝完成後，主題的啟用與關閉在 CSS 的 `@plugin "daisyui" { ... }` 區塊中設定。
```css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
- `themes` 是以逗號分隔的清單。
- `--default` 表示預設主題。
- `--prefersdark` 表示當 OS 以暗色模式為首選時使用。
如果想「先開啟全部再挑選」，可以這樣寫。
```css
@plugin "daisyui" {
themes: all;
}
```
但在產品開發中，通常只啟用實際需要的主題，這樣管理更簡單。
---
## 差異化重點：把「主題選擇」視為產品策略，而非單純設計 {#sec-612655295e82}
35 個主題不應只被視為「漂亮的皮膚」。我會這樣使用它們。
| 階段 | 使用方式 |
|------|-----------|
| **MVP 階段** | 把主題當作「品牌候選」放置多個，快速驗證 UI/內容是否匹配 |
| **運營階段** | 由於不硬編碼顏色，品牌更新或季節活動只需切換主題即可 |
| **團隊協作** | 即使沒有設計師，只要遵守「角色基礎令牌」，也能保持一致性 |
核心訊息很簡單。
> **只要拋棄「直接寫顏色」的習慣，主題就能瞬間升級整個應用。**
---
## 何時需要自訂主題？ {#sec-67726d664b47}
結論是，**大多數情況下 35 個預設主題已足夠**。它們已經非常成熟，通常只需「選擇一個主題 + 微調」即可投入實務。
但在以下情況下，考慮自訂（覆寫）會更合適。
- **品牌色彩已明確**：公司或服務的代表色已確定，想在 35 個主題中挑選一個，然後在其上覆蓋品牌色。
此時，與其從頭創建新主題，不如只微調 `primary`、`secondary` 等關鍵色，這樣既保留了主題的平衡，又能呈現品牌色。
如何實際覆寫 `primary`、`secondary`，將在下一篇文章中以程式碼示範。
---
## 下一篇預告 {#sec-b349bf2c99ab}
下一篇將討論：
- 「保持主題，僅微調元件」的實戰模式
- 如何自訂主題
- daisyUI 支援的顏色變數與類別的速查表
下次見！