暗黑模式不是反色：色彩理論的 dark theme

很多開發者做暗黑模式的方法是 filter: invert(1) 或交換背景與文字色。看起來「黑底白字」就好了 — 結果做出來醜得讓使用者退出。這篇講為什麼，並提供一套真正可用的 dark theme 設計原則。

為什麼反色不行

三個技術原因：

1. 純黑 (#000) 對比度過高

白底黑字的對比度是 21:1，極佳的閱讀對比。但黑底純白（#FFF）也是 21:1 — 在低光環境下看會「刺眼」。眼睛在暗環境下瞳孔放大，過高對比反而疲勞。

修法：背景用 #0A0A14 而非 #000；文字用 #E8E8F0 而非 #FFF。

2. 彩色字體在反色後飽和度爆表

白底用 #4A7BF5 看起來合理。直接反成黑底用 #B58410（補色）會像「螢光筆刺眼」。

修法：dark theme 用更亮但飽和度稍低的同色系，如 #6E96FF。

3. 陰影邏輯倒過來

白底的陰影是「物件投在背景上的暗影」。黑底時，物件其實「發光」更合理 — 但反色不會這樣處理。

修法：dark theme 用「邊框」或「淺色 highlight」表達層次，不用陰影。

本站的 light → dark 對照

注意：每對顏色不是「直接反色」，是「感知亮度對等」。

WCAG 對比度要求

無障礙指南 WCAG 2.1 AA 要求：

• 正文（normal）：最低 4.5:1 對比
• 大標題：最低 3:1 對比
• UI 元件邊界：最低 3:1 對比

用工具檢查：WebAIM Contrast Checker。

「真黑」OLED 螢幕的特殊考量

iPhone / Galaxy 的 OLED 螢幕，純黑像素其實不發光（省電 + 真黑感）。所以許多 dark theme 用 #000 而非 #0A0A14：

• 支持 OLED 黑：背景純 #000、卡片用 #0A0A14（有層次）
• 不支持：背景 #0A0A14（一致性 across 螢幕類型）

本站偏好後者 — 一致性勝過電力優化。

Dark theme 的圖片處理

有些 light theme 的截圖在 dark 裡會變得太亮。解法：

img.theme-aware {
  filter: brightness(0.85) contrast(1.05);
}
[data-theme="dark"] img.theme-aware {
  filter: brightness(0.7) contrast(1.1);
}

或者乾脆每個圖準備兩個版本，根據主題切換。

實作：CSS variables 切換

:root {
  --bg: #F4F4F7;
  --text: #0F0F1E;
  /* ... */
}

[data-theme="dark"] {
  --bg: #0A0A14;
  --text: #E8E8F0;
  /* ... */
}

JS 切換：

document.documentElement.setAttribute(
  'data-theme',
  prefersDark() ? 'dark' : 'light'
);

跟隨系統 vs 強制主題

const sysDark = matchMedia('(prefers-color-scheme: dark)').matches;
const userPref = localStorage.getItem('theme'); // 使用者明確選的
const theme = userPref || (sysDark ? 'dark' : 'light');

邏輯：使用者明確選了哪個主題就用哪個；沒選就跟系統。

過渡動畫

切換主題時整頁瞬間變色很突兀。加 0.3 秒過渡：

html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}

切換完移除 class，避免後續操作都很慢。

結語

好的 dark theme 是重新設計的成果，不是 light theme 反色的副產品。本站目前是 light only，但底層 token 系統設計就為未來做 dark theme 預留空間。對任何認真做產品的設計師，dark mode 都是值得獨立思考的議題。