daisyUI 色彩名稱與類別速查表：主題切換的必備參考
daisyUI 的最大優勢在於 輕鬆切換主題。然而一旦開發者/設計師直接使用 bg-blue-500 之類的 Tailwind 固定色彩，這個優勢就會消失。相反地，若使用 daisyUI 所提供的 primary、base-100、error 等 意義化色彩名稱，並以 btn-primary、bg-base-200、text-error 等方式編寫 HTML，僅改變主題即可讓整個 UI 自動跟隨。
因此核心在於 掌握色彩名稱與類別模式，並將兩者結合進行標記。對於熟練的設計師來說可能已經能直覺使用，但對於初學者或偶爾接觸 UI 的後端/全端開發者而言，與其每次翻閱文件，不如把這份速查表放在旁邊，工作時即時參考，效率更高。本文正是為此目的，將「何時使用哪個色彩名稱」與「如何將其結合到類別」整理成表格。
色彩名稱（何時使用）
| 色彩名稱 | 何時使用（簡述） | 代表使用範例 |
|---|---|---|
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 背景上文字顏色 |
類別模式（色彩名稱結合規則）
| 目的 | 模式 | 範例 |
|---|---|---|
| 背景色 | 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 |
透過不透明度調整濃度
| 目的 | 模式 | 範例 |
|---|---|---|
| 輕淡背景 | 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 中加入除上述色彩名稱以外的顏色不利於設計統一性，也可能在主題切換時造成色彩突兀，故不建議。
相關閱讀 :
目前沒有評論。