dark mode 網頁實作指南：從 CSS 設計原則到手動切換完整流程

什麼是網頁深色模式？與它為什麼重要

網頁深色模式是一種介面主題設計，以深色背景搭配淺色文字，核心目的在於減少螢幕眩光、降低特定顯示器的耗電量，並在低光環境下提供更舒適的閱讀體驗。對現代網頁設計而言，實作深色模式不僅是回應使用者個人偏好的選項，更能提升網站的可用性與無障礙性，讓使用者在長時間瀏覽時減少眼睛疲勞，進而增加停留意願。

在搜尋結果中，深色模式的定義與價值已多被提及。從網頁實作的角度來看，它是一個需要透過色彩系統與 CSS 技術來完整實現的設計決策，其效益直接體現在使用者體驗（UX）與使用者介面（UI）的協調性上。

深色模式的設計原則與注意事項

設計深色模式並非僅將顏色反轉，而是需要遵循一套以可讀性與舒適度為核心的視覺原則。關鍵在於選擇合適的色彩層次、調整陰影表現，並確保所有內容在深色背景下依然清晰可辨，這需要從設計階段就納入考量。

• 色彩選擇：避免使用純黑（#000）作為背景，搭配純白（#fff）文字。這種極端對比容易產生「光暈效應」，導致文字邊緣發光而難以閱讀。建議使用深灰色調，例如 #121212 或 #1a1a1a，創造柔和的視覺感受。
• 陰影與光效：在深色背景上，傳統的陰影效果可能難以察覺。可改用更為柔和、模糊的陰影，或轉換為向上發散的微光效果，以定義元素層次。
• 圖片與多媒體：帶有透明背景的 PNG 圖片在深色背景下可能出現異色邊緣或難以辨識。最佳實踐是為圖片提供深色模式專用的變體，或為圖片容器添加合適的背景色。使用 CSS 濾鏡（如 brightness()）動態調整也是一種方法。
• 無障礙對比度：文字與背景的對比度必須符合 WCAG（網頁內容無障礙指南）的 AA 標準，至少達到 4.5:1。這是在實作時必須持續驗證的技術指標。

CSS 如何實現明暗主題切換？核心技術解析

實現網頁深色模式的技術核心在於 CSS，主要可分為「系統偏好偵測」與「手動切換」兩種路徑。前者依賴作業系統設定自動生效，後者則提供使用者在網站上直接控制的選項，兩者常結合使用以提供最佳彈性。

路徑一：系統偏好偵測

使用 CSS 媒體查詢 @media (prefers-color-scheme: dark)，可以偵測使用者作業系統目前的色彩主題設定。當使用者系統設定為深色時，該媒體查詢區塊內的 CSS 樣式將會生效。

/* 定義預設的淺色主題變數 */
:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
}
/* 當系統偏好為深色時，覆蓋變數值 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

路徑二：手動切換

透過 JavaScript 動態修改 <html> 標籤的屬性（如 data-theme="dark"）或 <body> 的 class 名稱，配合 CSS 的類別選擇器來切換主題。此方式的關鍵在於利用 CSS 自訂屬性（變數）來定義色彩系統。

/* 基礎變數定義 */
:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
}

/* 透過 data 屬性切換時的深色主題變數 */
:root[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

適用場景比較：系統偏好偵測能提供無縫的自動化體驗，適用於無需使用者主動切換的基礎實作。手動切換則賦予使用者控制權，適合需要明確切換按鈕的應用場景。兩者並不互斥，可以並存：先偵測系統偏好，同時提供手動按鈕供使用者覆蓋選擇。

網頁如何適配不同作業系統與瀏覽器？

確保深色模式在各種環境中正確顯示，除了 CSS 變數外，還需要一個關鍵的 HTML 標籤來與瀏覽器進行溝通。這一步驟常被忽略，卻會影響原生 UI 元素與網頁主題的一致性。

• 關鍵標籤：<meta name="color-scheme" content="light dark">。此標籤聲明網頁支援的色彩方案，告知瀏覽器可以安全地將原生 UI 元素（如捲動條、表單控制項、輸入框）調整為與深色主題協調的樣式。
• 標籤作用：content="light dark" 表示淺色與深色皆為支援方案，第一個值為預設。瀏覽器會根據此標籤及使用者的系統偏好，自動調整原生介面的顏色，避免滾動條等元素仍為白色而破壞整體體驗。
• 跨瀏覽器測試：儘管現代主流瀏覽器（如 Chrome、Firefox、Safari、Edge）均已支援 prefers-color-scheme 與 color-scheme 標籤，但在不同平臺（Windows、macOS、iOS、Android）上的細節表現仍有差異。實作後必須在這些環境中進行測試，確保視覺一致性。

從零開始：為你的網站實作深色模式的步驟清單

將深色模式整合至現有或新建網站，可遵循一個系統化的流程。此流程以 CSS 自訂屬性為基礎，確保維護性與擴充性。

1. 步驟一：定義色彩變數系統。審視網站中使用的所有顏色，將其歸納為背景、前景文字、主要色彩、次要色彩、警告色等角色，並為每個角色建立 CSS 自訂屬性（如 --color-primary）。
2. 步驟二：建立淺色主題預設值。在 :root 規則中，為所有色彩變數賦予預設的淺色主題數值。
3. 步驟三：定義深色主題覆蓋值。使用 @media (prefers-color-scheme: dark) 或 [data-theme="dark"] 等選擇器，重新定義這些變數的深色主題數值。這是切換主題的核心。
4. 步驟四：全站元件採用變數。檢查所有 HTML 元件的 CSS，確保顏色值均透過 var(--color-xxx) 變數引用，而非硬編碼的 hex 色碼。
5. 步驟五：添加 <meta color-scheme> 標籤。在 HTML 的 <head> 中加入 <meta name="color-scheme" content="light dark">，以適配瀏覽器原生 UI。
6. 步驟六：全面測試與調整。使用瀏覽器開發工具模擬深色模式，逐一檢查導覽列、表單、按鈕、圖片、彈窗等元件，並調整色彩變數或個別樣式以達到最佳效果。建議在實作初期就將此步驟納入開發流程。

在規劃網站色彩時，建立清晰的 色彩系統與變數規範 至關重要，這能讓深色模式的實作變得更加順暢且易於維護。

如何測試與維護深色模式樣式？

實作完成後，必須透過系統化的測試來確保品質，並建立持續維護的機制，以防範未來新增功能時破壞深色模式樣式。

• 使用開發工具模擬：Chrome DevTools 與 Firefox 開發者工具皆提供模擬 prefers-color-scheme 媒體查詢的功能。可快速切換至深色模式查看頁面效果，無需實際更改系統設定。
• 逐頁逐元素檢查：重點檢查互動性與複雜元件。包括：導覽列與選單、搜尋框與表單輸入欄位、按鈕與連結的 hover/focus 狀態、圖片與影片容器、自訂的 modal 或 pop-up 彈窗、第三方嵌入元件（如地圖、播放器）。
• 建立維護規範：將「雙主題意識」納入設計與開發文件。明確規定新增 UI 元件時，必須同步定義其在淺色與深色主題下的色彩變數。考慮將色彩變數清單與主題切換邏輯視為核心基礎架構的一部分。
• 利用標準屬性輔助：在 <html>

  深色模式一定要用純黑背景嗎？

  不建議。設計原則中強調應避免使用純黑（#000）背景搭配純白（#fff）文字，因為可能造成高對比度導致的視覺疲勞（稱為「光暈效應」）。建議使用深灰色調（如 #121212 或 #1a1a1a）作為背景。

  CSS 的 `prefers-color-scheme` 媒體查詢是什麼？

  這是一個 CSS 媒體查詢，用於偵測使用者作業系統或瀏覽器目前設定的色彩主題偏好（亮色或暗色）。網頁可以透過這個查詢自動應用對應的 CSS 樣式，實現無縫的明暗主題切換。

  如果使用者手動切換了深色模式，但我的網站沒有反應怎麼辦？

  這表示您的網站可能未使用 prefers-color-scheme 媒體查詢來響應系統偏好，或未提供手動切換的選項。您需要為網站實作主題切換機制，可以是偵測系統偏好，或在介面上添加明暗模式切換按鈕。

  實作深色模式時，圖片需要特殊處理嗎？

  是的。特別是帶有透明背景的 PNG 圖片或某些插圖，在深色背景下可能難以辨識或產生異色邊緣。最佳實踐包括：為圖片提供深色模式專用版本；使用 CSS 濾鏡（如 filter: brightness()）動態調整；或為圖片容器添加合適的背景色。

  `meta name="color-scheme"` 有什麼作用？

  這個 <meta> 標籤用於告知瀏覽器此網頁支援哪些色彩方案（如 light dark）。它會影響瀏覽器原生 UI 元素的顏色，例如滾動條、表單控件、輸入框邊框等，使其與網頁的深色主題保持協調一致。

  深色模式會讓網站載入更快或更省電嗎？

  在 OLED 或 AMOLED 螢幕上，顯示深色像素確實比顯示淺色像素更省電。但對於網站的整體載入速度，深色模式本身並無直接影響。其節電效果主要體現在使用者端的裝置上，而非網站本身的效能優化。