跳至主要内容

色彩系統

AppFuse Web 採用全語意化色彩策略：所有色彩透過 DaisyUI 語意 class 引用，由主題變數決定實際色值。這確保元件在切換主題時自動適配，無需修改任何程式碼。

設計原則​

  1. 全語意化 — 所有色彩使用語意 class（text-primary、bg-base-200），不使用硬編碼色值
  2. No hardcoded colors — 禁止直接使用 Tailwind 色板（text-gray-500、bg-red-600）
  3. No dark: prefix — 不使用 dark: 條件前綴，主題切換由 DaisyUI 變數自動處理
  4. OKLch 色彩空間 — 所有主題色以 OKLch 定義，確保感知均勻

色彩層級​

品牌色​

品牌色定義應用的視覺識別，用於主要操作、強調元素。

語意名稱用途Fusion 主題值CSS 變數
primary主要操作、連結、焦點指示oklch(50% 0.035 230) 藍灰--color-primary
secondary次要操作、輔助強調oklch(60% 0.20 35) 深橙--color-secondary
accent裝飾性強調、特殊標記oklch(48% 0.13 245) 藍色--color-accent
neutral中性元素、預設按鈕oklch(50% 0.035 230) 藍灰--color-neutral

基底色​

基底色建立頁面的背景層次結構，從淺到深區分不同區域。

語意名稱用途Fusion 主題值CSS 變數
base-100主要背景（頁面、卡片內容）oklch(99% 0.005 230) 極淺藍灰--color-base-100
base-200次要背景（側邊欄、區塊背景）oklch(97% 0.008 230) 淺藍灰--color-base-200
base-300邊框、分隔線、hover 狀態oklch(94% 0.012 230) 藍灰--color-base-300
base-content主要文字內容oklch(27% 0.025 230) 深藍灰--color-base-content

狀態色​

狀態色傳達操作回饋，每種狀態有明確的語意。

語意名稱用途Fusion 主題值CSS 變數
info提示訊息、資訊標記oklch(60% 0.12 200) 青色--color-info
success成功操作、正面狀態oklch(45% 0.10 170) 深青綠--color-success
warning警告訊息、注意事項oklch(71.5% 0.165 60) 橙色--color-warning
error錯誤訊息、破壞性操作oklch(52% 0.19 27) 紅色--color-error

Content 顏色配對​

DaisyUI 為每個語意色自動提供對應的 -content 色，確保文字在該色彩背景上保持可讀性：

背景色Content 色用途
bg-primarytext-primary-content白色文字於 Primary 背景上
bg-secondarytext-secondary-content白色文字於 Secondary 背景上
bg-accenttext-accent-content白色文字於 Accent 背景上
bg-neutraltext-neutral-content白色文字於 Neutral 背景上
bg-infotext-info-content白色文字於 Info 背景上
bg-successtext-success-content白色文字於 Success 背景上
bg-warningtext-warning-content白色文字於 Warning 背景上
bg-errortext-error-content白色文字於 Error 背景上
bg-base-100text-base-content深色文字於淺色背景上
配對規則

當使用語意色作為背景時，永遠搭配對應的 -content 色作為前景。這是 DaisyUI 的核心設計：背景與前景成對使用，確保對比度。

文字透明度層級​

透過 Tailwind 的透明度修飾符控制文字層次：

層級透明度用法說明
主要100%text-base-content標題、正文、表格內容
次要60%text-base-content/60輔助說明、timestamps
禁用40%text-base-content/40禁用狀態、placeholder
// 文字層次範例
<h2 className="text-base-content">訂單詳情</h2>           {/* 100% - 標題 */}
<p className="text-base-content/60">建立於 2024-01-15</p>  {/* 60% - 輔助資訊 */}
<span className="text-base-content/40">尚未填寫</span>      {/* 40% - placeholder */}

元件顏色 API​

框架元件統一支援 8 種語意色：default、primary、secondary、accent、info、success、warning、error。

// Button
<Button color="primary">主要操作</Button>
<Button color="error">刪除</Button>

// Input
<Input color="error" label="電子郵件" />

// Checkbox
<Checkbox color="primary" label="同意條款" />

Do / Don't​

// ✅ Do：使用語意化顏色
<p className="text-base-content">主要文字</p>
<p className="text-base-content/60">次要文字</p>
<div className="bg-primary text-primary-content">品牌區塊</div>
<span className="text-error">必填欄位</span>

// ❌ Don't：硬編碼顏色
<p className="text-gray-900">主要文字</p>
<p className="text-gray-500">次要文字</p>
<div className="bg-blue-600 text-white">品牌區塊</div>
<span className="text-red-500">必填欄位</span>
// ✅ Do：依賴主題自動切換
<div className="bg-base-100">內容區域</div>

// ❌ Don't：使用 dark: prefix 手動處理
<div className="bg-white dark:bg-gray-900">內容區域</div>

WCAG 對比度要求​

所有文字必須符合 WCAG 2.1 AA 標準：

文字類型最低對比度說明
一般文字4.5:1正文、標籤、按鈕文字
大文字（≥ 18px bold 或 ≥ 24px）3:1標題、大按鈕
非文字元素3:1圖示、邊框、焦點指示器

Fusion 主題的 base-content（深藍灰）在 base-100（極淺藍灰）上的對比度遠超 4.5:1，確保主要文字在所有情境下清晰可讀。

相關文件​