# daisyUI 色彩名稱與類別速查表：主題切換的必備參考

daisyUI 的最大優勢在於 **輕鬆切換主題**。然而這一優點在開發者/設計師直接使用 `bg-blue-500` 之類的 Tailwind 固定色彩時會被打破。相反地，若使用 daisyUI 所提供的 `primary`、`base-100`、`error` 等 **意義化色彩名稱**，並以 `btn-primary`、`bg-base-200`、`text-error` 等方式編寫 HTML，僅改變主題即可讓整個 UI 自動跟隨。

因此核心在於 **掌握色彩名稱與類別模式，並將兩者結合進行標記**。對於熟練的設計師來說可能已經能直覺使用，但對於初學者或偶爾接觸 UI 的後端/全端開發者而言，與其每次翻閱文件，不如把這份速查表放在旁邊，工作時即時參考，效率更高。本文正是為此目的，將「何時使用哪個色彩名稱」與「如何將其結合到類別」整理成表格。

![機器人開發者與色彩調色盤卡片](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## 色彩名稱（何時使用） {#sec-4d3fa8b26445}

| 色彩名稱 | 何時使用（簡述） | 代表使用範例 |
| ------------------- | --------------------- | ---------------- |
| `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 背景上文字顏色 |

---

## 類別模式（色彩名稱結合規則） {#sec-5007f90f39f0}

| 目的 | 模式 | 範例 |
| ------------- | --------------------------- | -------------------------------------- |
| 背景色 | `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` |

---

## 透過 Opacity 調整濃度 {#sec-c72e6700b4d3}

| 目的 | 模式 | 範例 |
| -------- | --------------------- | -------------------------------- |
| 輕淡背景 | `bg-{COLOR}/10` | `bg-primary/10`、`bg-success/15` |
| 微妙邊框 | `border-{COLOR}/30` | `border-error/30` |
| 輕淡文字 | `text-{COLOR}/70` | `text-base-content/70` |
| Hover 強度 | `hover:bg-{COLOR}/80` | `hover:bg-primary/80` |

> 想調整色彩濃度時，請在類別+色彩組合後加上 `/數字(百分比)`。雖然可以覆寫上述色彩名稱來改變顏色，但在 HTML 中加入除上述色彩名稱以外的顏色不利於設計統一性，也可能在主題切換時造成色彩突兀，故不建議。

---

**相關閱讀** : 

- [daisyUI 主題：35 色彩調色盤讓你不再煩惱](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)  
- [Tailwind CSS 插件 daisyUI 介紹：僅用類別快速打造 UI](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)