深色模式為什麼重要
2026 年，大多數主流作業系統和瀏覽器都支援深色模式偏好設定，且多數用戶在晚間瀏覽時會開啟深色模式。
根據 Android 的官方數據，約有 81.9% 的用戶使用深色模式（當功能可用時）。在台灣，深色模式偏好在 18–35 歲族群中尤其普遍。
對品牌網站來說，提供辦色模式有幾個好處：
- 提升長時間閱讀的舒適度
- 在 OLED 螢幕上節省電量
- 給品牌更高端、科技感的形象
深色模式的 3 大常見錯誤
錯誤 1：把白色直接換成純黑（#000000）
純黑背景 + 白色文字的對比度太強，長時間閱讀反而造成眼睛疲勞——就像在黑暗中看刺眼的光。
正確做法： 使用深灰藍，例如 #0f1117、#1a1d27、#121316，而不是純 #000000。
錯誤 2：忽視陰影和邊框在深色模式的問題
淺色模式的陰影（shadow）在深色背景中完全不可見。邊框顏色也需要調整——原本 gray-200 的邊框在深色背景上看不出來。
正確做法： 深色模式要重新定義陰影（通常改用邊框代替陰影，或使用 glow 效果）。
錯誤 3：顏色飽和度沒有降低
亮色模式的飽和高色彩（例如鮮綠、亮紅），在深色背景上看起來會過於刺眼。
正確做法： 深色模式中，主色和強調色的飽和度應略低於淺色模式版本。
深色模式的顏色層次
一套好的深色模式色彩系統，通常有 3–4 個深色層次：
- 背景（Background）：最深的顏色，例如 #0f1117
- 表面（Surface）：比背景略亮，用於卡片、面板，例如 #1a1d27
- 表面高亮（Surface Elevated）：hover 狀態或懸浮元素，例如 #21262d
- 邊框：微妙的邊框，例如 #30363d
這樣的層次讓頁面在深色背景上仍有視覺深度，而不是一片漆黑。
文字的對比度設定
WCAG AA 標準要求最低 4.5:1 的對比度。
常見的深色模式文字顏色：
- 主要文字：#e6edf3（略帶藍的白，比純白柔和）
- 次要文字：#8b949e
- 禁用文字：#484f58
永遠不要在深色模式中用純白 #ffffff 作為大量文字顏色——它在 OLED 螢幕上過於刺眼。
在 Tailwind CSS 中實作深色模式
Tailwind 有內建的 dark: 修飾符，讓你為深色模式定義不同的樣式。
首先在 tailwind.config 中設定 darkMode: 'class'（跟隨 class）或 'media'（跟隨系統設定）。
使用 'class' 模式，你可以在 html 元素加上 dark class 來手動控制。
樣式範例（在元素上同時定義淺色和深色兩種樣式）：
div 的 class 同時包含 bg-white 和 dark:bg-gray-900，以及 text-gray-900 和 dark:text-gray-100。
在 Next.js 中整合 next-themes
next-themes 是目前 Next.js 最常用的主題切換解決方案：
安裝：npm install next-themes
在根 layout 中包裹 ThemeProvider，然後用 useTheme hook 在任何地方切換主題。
品牌色在深色模式的調整
如果你的品牌主色是彩色（例如橘色 #e8820a），在深色模式中可能需要調整：
- 略微提亮（增加 10–15% 的亮度）
- 略微降低飽和度
- 確保在深色背景上的對比度符合 WCAG
工具推薦：whocanuse.com 可以快速確認任意顏色組合的 WCAG 合規性。
何時不需要深色模式
深色模式不是每個品牌都需要的。以下情況可以暫時不做：
- 品牌以大量彩色圖片為主（深色模式會讓圖片色調顯得不自然）
- 目標受眾是中老年人（對深色模式偏好較低）
- 預算有限，先把其他更重要的事做好
如果要做，就做對；做不好的深色模式比沒有更傷品牌形象。