dark mode設計怎麼做？深色模式 UI 原則與實作

Dark Mode 深色模式是什麼？和夜間模式、護眼模式差在哪？

Dark Mode 深色模式是一套完整的介面主題策略，涵蓋背景、文字、元件、圖片、狀態與互動回饋；它不能只被理解成夜間使用，也不能被包裝成保證護眼的功能。

名稱	核心概念	設計重點	常見誤解
深色模式	介面主題策略	色彩、層次、元件狀態、媒體適配	把背景改黑就完成
夜間模式	偏向低光環境使用	降低亮度刺激，保留可讀性	只能晚上使用
護眼模式	偏向亮度、色溫或閱讀舒適度	避免過亮、過刺眼、過高反差	能保證保護視力

深色模式不是把淺色模式直接反轉

直接反轉會讓品牌色過亮、圖片邊界突兀、文字對比失控，也會讓 disabled、hover、error 等狀態失去原本的語意。好的 dark mode設計要重新定義每一層介面的用途。

背景、文字、邊框、圖片、狀態都要重新設計

背景要有 surface 色階，文字要有主次層級，邊框要能分隔區塊，圖片要避免白底突兀，互動狀態要讓使用者看得出目前能不能點、是否已選取、是否發生錯誤。

夜間模式偏使用情境，深色模式偏介面系統

夜間模式通常在低光環境中被提及，重點是螢幕亮度與觀看負擔。深色模式 UI 設計則更接近產品層級的主題系統，需要同時支援元件、內容、表單、圖表與第三方嵌入內容。

護眼效果可以討論，但不能過度宣稱

深色模式可能在某些低光環境降低刺眼感，但不能宣稱一定護眼。設計上比較可靠的說法是：控制亮度、對比與閱讀節奏，讓介面在合適場景下更容易長時間使用。

什麼網站適合做深色模式？什麼情況不一定需要？

深色模式適不適合，取決於網站類型、使用時間、內容密度、品牌調性與轉換目標；長時間操作型產品通常更適合，強銷售導向頁面則要先驗證 CTA 與表單表現。

網站類型	適合程度	主要原因	優先檢查
SaaS 後台	高	使用時間長，資訊密度高	表格、篩選器、狀態標籤
開發者工具	高	使用者常有深色環境偏好	程式碼區塊、提示、錯誤訊息
內容網站	中	長文閱讀可能受益，但排版要細緻	正文、目錄、內部連結
電商網站	中低	商品圖與信任感容易受影響	商品圖、價格、CTA、結帳流程
銷售頁	需測試	轉換路徑比風格更重要	主按鈕、表單、推薦證明

適合優先做深色模式的網站類型

需要長時間停留、重複操作、資訊密度高的產品，通常最有優先導入價值。這類產品的深色模式不只是外觀選項，也會影響工作流的持續使用感。

SaaS 後台、開發者工具、影音平台、長時間使用產品

SaaS 後台要重視表格和狀態色，開發者工具要重視程式碼區塊和錯誤提示，影音平台要避免介面干擾內容本身。這些場景都需要穩定的深色模式配色規格。

需要謹慎評估的網站類型

如果網站主要任務是購買、填表、諮詢或提交資料，深色模式可能影響使用者對資訊可信度、商品細節與 CTA 的判斷。我的判斷是，這類頁面應先做小範圍測試，不該一次套用全站。

電商、表單導向頁、需要強 CTA 的銷售頁

商品照片、價格、優惠標籤、表單欄位與主要按鈕都要重新檢查。白底商品圖放在深色背景上很容易顯得突兀，表單邊框太弱也會讓填寫動線變慢。

淺色模式 vs 深色模式怎麼選

預設主題應依主要使用情境決定。白天辦公、長篇資料輸入、需要大量比較的任務，淺色模式仍然可靠；夜間瀏覽、影音、監控儀表板與高頻操作工具，深色模式更有機會提升舒適度。

環境光、閱讀長度、品牌調性、使用時間、轉換目標

決策時可列出五個條件：使用者多在什麼環境使用、一次閱讀多長、品牌是否適合低亮度介面、單次使用時間多長、頁面最重要的轉換動作是什麼。

Dark Mode 設計的核心原則：先做可讀性，再做風格

Dark Mode 設計原則的第一優先不是讓畫面看起來更有氣氛，而是確保可讀性、層次與互動狀態清楚；風格必須建立在可用的色彩系統上。

常見做法	問題	建議修正
純黑背景配純白文字	反差過強，長文容易疲勞	使用深灰背景與柔和淺灰文字
直接沿用品牌亮色	在深色背景上過度跳出	調整明度與彩度
所有文字同一個白色	資訊層級不清楚	建立 primary、secondary、muted 層級
只檢查首頁	內頁與舊內容容易破版	納入 CMS、表單、圖表與嵌入內容

避免純黑 #000 搭配純白 #fff

純黑純白在螢幕上容易形成強烈視覺震動，尤其是長文、表格與密集資訊區。深色模式網站通常更適合使用接近黑色的深灰，而不是絕對黑。

用深灰與淺灰降低視覺震動

例如背景可落在深灰區間，正文使用柔和淺灰，次要文字再降低亮度。這樣仍能保有對比，也不會讓每一行文字都像在發光。

文字對比要夠，但不是越亮越好

WCAG 對比是基本門檻，但閱讀舒適度還要看字級、字重、行高、段落長度與背景亮度。設計師不能只看工具數字，還要實際閱讀整段內容。

正文、次要文字、提示文字、disabled 狀態要分層

正文應最清楚，次要文字可降低亮度，提示文字要仍可辨識，disabled 狀態要明顯弱化但不能消失。我的經驗是，disabled 做得太淡，是深色模式最常被忽略的可用性問題之一。

高飽和色在深色背景上會變刺眼

同一個品牌色放在淺色與深色背景上，視覺感受會不同。高飽和藍、綠、紅在深底上可能過亮，讓連結、按鈕或警示訊息變得干擾。

品牌色、連結色、警示色要重新調整明度與彩度

品牌主色可以保留辨識度，但互動色、警示色與成功色要另外定義深色版。錯誤訊息尤其不能只用紅字，還要搭配 icon、文字說明與欄位狀態。

正對比極性與負對比極性

淺底深字屬於正對比極性，深底淺字屬於負對比極性。兩者沒有絕對優劣，差別在於使用時間、內容密度與環境光。

長文閱讀不一定適合高亮深底，短時間操作則可接受較強對比

長文內容若使用過亮文字，閱讀一段時間後容易疲勞；按鈕、短提示、工具列等短時間操作元件，則可以使用較明確的對比來提高辨識。

深色模式的介面層次：背景、卡片、邊框、陰影怎麼設計？

深色模式的層次要靠 surface 色階、邊框、透明度與少量陰影共同建立；只靠陰影很容易在深色背景上失效，讓介面變得扁平或混濁。

不要只靠陰影表現高度

淺色介面常用陰影表現 elevation，但深色背景中陰影不容易被看見。若硬加重陰影，反而會讓區塊邊緣髒掉。

深色模式更常用色階、邊框、透明度表現層級

底層背景、卡片、浮層與提示元件應有不同 surface 值。邊框可用低透明度淺色，overlay 可用半透明黑或深灰，避免每個容器都黏在一起。

背景與卡片要有可辨識差異

卡片不需要亮很多，但要讓使用者看得出內容群組。若背景與卡片只差一點點，列表、設定頁和 dashboard 會很難掃讀。

Modal、Dropdown、Tooltip、Toast 要有獨立層級

浮層元件要比卡片更明確，尤其是 dropdown 和 tooltip。若浮層和背景色太接近，使用者會不知道目前焦點在哪裡，也可能誤判可操作範圍。

文字、Icon、CTA 與狀態色的深色模式規格

深色模式的元件規格必須重新定義文字、icon、CTA、hover、focus、active、disabled、error 與 success；只換背景色會讓互動狀態不完整。

正文、標題、輔助文字要分級

標題可比正文更亮或更重，正文要保持穩定可讀，輔助文字則降低權重。所有文字層級都應有 token，而不是由設計師臨時挑灰色。

Icon 不應全部使用同一個白色

導覽 icon、功能 icon、狀態 icon 的語意不同。一般 icon 可用次要文字色，active icon 使用主文字或品牌色，disabled icon 要跟文字一樣有弱化規格。

CTA 在深色模式下要維持可見度

CTA 不能只看按鈕本身亮不亮，還要看它在整個版面中是否容易被找到。深色背景會放大高亮色的存在感，也會讓低對比按鈕更容易被忽略。

主要按鈕、次要按鈕、文字連結、危險操作

主要按鈕要有清楚填色與 hover 狀態，次要按鈕要有邊框或背景差異，文字連結要避免只靠顏色，危險操作要用紅色、文案與確認流程共同提示。

Hover、Focus、Active、Disabled 不可缺漏

每個互動狀態都要在設計稿與前端 token 中存在。Focus ring 特別重要，因為鍵盤使用者需要知道目前停在哪個元件上。

圖片、Logo、圖表與第三方嵌入內容怎麼處理？

圖片、Logo、圖表與 iframe 不能假設會自動適配深色模式；上線前要逐一檢查亮度、透明度、邊界、資料色與第三方內容的主題限制。

內容類型	常見問題	處理方向
白底圖片	在深色背景中過亮	加容器、邊框或改用適合版本
透明 Logo	深色背景上細節消失	準備反白或深底專用版本
圖表	資料色不易分辨	重新配置軸線、標籤與資料色
iframe	不跟隨網站主題	確認第三方是否支援主題參數

白底圖片會破壞深色介面節奏

內容網站常有舊文章插圖、截圖或廣告素材是白底。直接放在深色頁面會形成很大的亮度斷層，讀者視線會被圖片搶走。

Logo 需要準備深色背景版本

Logo 若只有彩色或深色版本，在深底上可能看不清楚。至少要檢查頁首、頁尾、登入頁、分享圖與第三方登入按鈕旁的品牌識別。

圖表不能只換背景，資料色也要重配

圖表的軸線、格線、標籤、tooltip、legend 和資料色都要一起調整。資料色過暗會看不見，過亮又會讓圖表變成畫面中最刺眼的區塊。

第三方 iframe 可能無法跟著切換主題

地圖、表單、影片、社群貼文與付款模組不一定支援深色主題。若無法控制內容本身，至少要檢查外框、背景與載入狀態，避免突然出現大片淺色區塊。

Design Token 怎麼規劃，深色模式才不會難維護？

深色模式要可維護，就要用語義化 design token 管理色彩用途，再由不同 theme 對應實際色值；元件應讀 token，不應在各處硬寫色碼。

不要用 dark-gray-900 這種顏色名稱綁死用途

以顏色命名的 token 容易讓元件和色碼綁死。當品牌調整或深色模式增加第二套主題時，維護者很難判斷某個灰色到底是背景、邊框還是文字。

用語義命名：surface-primary、surface-secondary、text-primary

語義 token	用途	淺色模式範例	深色模式範例
surface-primary	頁面主背景	#ffffff	#121417
surface-secondary	卡片或區塊背景	#f5f7fa	#1b1f24
text-primary	主要文字	#1f2933	#e7eaee
text-muted	輔助文字	#667085	#9aa4b2
border-subtle	低強度分隔線	#d9dee7	#2b3139

primary/default 與 inverse 的使用邏輯

primary/default 可用於主要品牌行動，inverse 則用於需要反向顯示的文字或元件。不要把 inverse 當成萬用白色，它應只出現在語意需要反轉的場景。

同一個元件應讀 token，不應硬寫色碼

按鈕、卡片、表單、提示訊息都應讀取語義 token。若同一個元件在不同頁面用不同硬寫色碼，深色模式維護成本會快速升高。

CSS variables 與 prefers-color-scheme 的基本架構

工程上可用 CSS variables 定義主題值，再用 prefers-color-scheme 讀取系統偏好。以下只示範架構，不需要把深色模式寫成完整前端教學。

:root {
  --surface-primary: #ffffff;
  --text-primary: #1f2933;
}
@media (prefers-color-scheme: dark) {
:root {
—surface-primary: #121417;
—text-primary: #e7eaee;
}
}
[data-theme=“dark”] {
—surface-primary: #121417;
—text-primary: #e7eaee;
}

使用者偏好邏輯：系統預設、自動切換、手動切換怎麼排序？

深色模式偏好應以使用者手動選擇為最高優先，其次才是已儲存偏好、系統偏好與網站預設；這樣才能避免產品覆蓋使用者明確選擇。

建議排序：使用者手動選擇 > 儲存偏好 > 系統偏好 > 網站預設

1. 如果使用者手動選擇深色或淺色，優先套用。
2. 如果瀏覽器中已有儲存偏好，延續上次選擇。
3. 如果沒有儲存值，讀取系統的 prefers-color-scheme。
4. 如果系統偏好不可用，套用網站預設主題。

切換按鈕要讓狀態清楚可理解

切換按鈕要能讓使用者知道目前是深色、淺色或跟隨系統。若只有一個圖示但沒有狀態提示，使用者可能不知道點擊後會變成什麼。

避免頁面載入時閃一下淺色再變深色

常見問題是頁面先載入淺色 CSS，JavaScript 執行後才改成深色，造成短暫閃爍。偏好判斷應盡量在畫面渲染前完成，至少要讓初始背景色和最終主題一致。

無障礙與可用性：深色模式不能只看 WCAG 對比

深色模式無障礙要檢查對比、焦點、狀態、色盲情境、強制色彩與動態效果；WCAG 對比合格只是基礎，不能代表整體可用性已經完成。

對比合格不等於閱讀舒服

同樣通過對比檢查的文字，放在不同字級、行距與背景亮度下，閱讀感受可能差很多。深色長文尤其要實測段落，而不是只測單一色票。

Focus ring 在深色背景要清楚

Focus ring 要有足夠明度和邊界，不應被品牌色、邊框或陰影吃掉。鍵盤操作時，使用者必須能立即辨識目前焦點位置。

錯誤、成功、警告不能只靠顏色區分

錯誤要搭配文字、icon 或欄位說明；成功與警告也要有語意標籤。只用紅、綠、黃區分狀態，對部分使用者並不可靠。

Forced Colors 與 Reduced Motion 的基本檢查

Forced Colors 模式可能覆蓋原本色彩，Reduced Motion 則會影響動畫和切換效果。若深色模式切換依賴動畫或透明度，應確認關閉動態後仍可理解。

深色模式會影響 SEO、閱讀停留或轉換嗎？

深色模式本身不是搜尋排名因素，也不會直接改變索引；但它可能透過閱讀舒適度、CTA 可見度、圖片辨識與信任感，間接影響使用者互動品質。

深色模式本身不是排名因素

搜尋引擎主要讀取內容、結構、連結與頁面體驗訊號。深色模式不應被包裝成 SEO 捷徑，也不能宣稱會保證提升排名。

閱讀舒適度、CTA 可見度、圖片辨識會影響行為表現

如果深色模式讓長文更難讀、內部連結不明顯、CTA 變弱，使用者可能更快離開。反過來，若主題切換做得穩定，對特定讀者也可能提升停留意願。

內容網站要特別測長文、目錄、內部連結與 CTA

內容網站不只要測首頁。文章頁的段落、H2、目錄、程式碼區塊、表格、內部連結與頁尾推薦內容都要檢查。可延伸閱讀 design system guide、UI color system planning 與 responsive UI breakpoints。

Dark Mode 上線前 QA Checklist

Dark Mode 上線前 QA 要涵蓋文字、表單、互動狀態、媒體、裝置、瀏覽器、CMS 舊內容與第三方嵌入；只測主要畫面不足以保證全站可用。

檢查項目	通過標準	負責角色
文字與對比	正文、輔助文字、連結皆可辨識	設計師、QA
表單狀態	錯誤、提示、disabled、focus 清楚	設計師、前端
媒體內容	Logo、圖片、圖表、iframe 不突兀	設計師、內容負責人
裝置與瀏覽器	手機、桌機與主流瀏覽器顯示穩定	QA、前端
舊內容	CMS 文章與嵌入內容無明顯破版	內容負責人、QA

文字與對比

檢查標題、正文、註解、連結、表格文字與程式碼區塊。不要只測單字，要讀完整段落。

表單、錯誤訊息、提示文字

欄位背景、placeholder、helper text、error message、success message 都要在深色背景中清楚。表單是我最不建議省略 QA 的區塊，因為它直接影響提交完成率。

Hover、Focus、Disabled、Loading

滑鼠、鍵盤與載入狀態都要測。Loading skeleton 若太亮，會比內容更搶眼；disabled 若太淡，使用者會以為元件消失。

Logo、圖片、圖表、iframe

檢查頁首、頁尾、文章內圖、白底截圖、資料圖表與第三方嵌入內容。圖表要測 tooltip 和 legend，不只看靜態畫面。

手機、桌機、不同瀏覽器

深色模式在手機 OLED 螢幕、桌機螢幕與不同瀏覽器中觀感可能不同。至少要測主要斷點、導覽、彈窗與表單流程。

CMS 舊內容與第三方嵌入

舊文章常有內嵌 HTML、舊表格、外部表單或社群貼文。這些內容未必讀取新的 design token，是深色模式上線後最容易出現破口的地方。

常見錯誤：看起來很高級，但其實很難用的深色模式

難用的深色模式通常不是單一色彩出錯，而是可讀性、層次、CTA、媒體與舊內容沒有一起檢查；視覺好看不能取代使用者完成任務。

背景太黑、文字太白

這會讓文字像浮在螢幕上，短時間看似清楚，長時間閱讀卻容易疲勞。修正方式是降低背景極端值，並讓文字亮度分級。

品牌色太亮，整頁像霓虹燈

品牌色在深色模式中需要重新校正。若主要按鈕、連結、icon、狀態標籤都使用高飽和品牌色，畫面會失去重點。

卡片和背景沒有層次

卡片、列表、側欄與主內容如果都使用同一個深色，使用者很難掃描資訊。修正方式是建立 surface 色階和 border token。

CTA 與連結不夠明顯

有些團隊為了降低亮度，把 CTA 也壓得太暗，結果主要行動消失在頁面裡。深色模式的 CTA 要同時保持可見、可點、可辨識。

只做首頁，內頁與舊內容沒有跟上

首頁漂亮不代表深色模式完成。文章頁、搜尋頁、分類頁、會員頁、結帳頁、舊 CMS 內容與嵌入內容都要納入檢查，不然使用者很快會遇到斷裂體驗。

Dark Mode 深色模式和夜間模式一樣嗎？

不完全一樣。深色模式是完整介面主題策略，夜間模式偏向低光環境使用。深色模式需要處理元件、文字、圖片、圖表與互動狀態，夜間模式則更常被用來描述使用情境。

深色模式真的比較護眼嗎？

不能保證。深色模式在低光環境可能降低刺眼感，但如果文字太亮、對比過強或行距太密，仍然可能造成閱讀負擔。比較負責任的設計目標是提升特定情境下的閱讀舒適度。

Dark Mode 設計可以直接把淺色模式反轉嗎？

不建議。直接反轉會讓品牌色、陰影、邊框、圖片和狀態色失控。深色模式設計應重新定義 surface、text、border、primary、error、success 等語義 token。

深色模式可以用純黑背景嗎？

可以在少數情境使用，例如全螢幕影音或特殊沉浸式畫面，但一般網站與 SaaS 後台不建議大量使用純黑。深灰背景通常更容易維持閱讀舒適度與介面層次。

深色模式文字對比多少才算安全？

WCAG 對比可作為基本檢查標準，但不能只看單一數字。實務上還要測字級、字重、行高、背景亮度、段落長度和實際閱讀感受。

品牌色在深色模式需要重做嗎？

通常需要。品牌色在深色背景上會顯得更亮、更跳，連結色、按鈕色、警示色和狀態色都應重新調整明度與彩度，避免整個介面失去重點。

圖片在深色模式太亮怎麼辦？

先檢查圖片類型。白底截圖可加容器或邊框，Logo 可準備深色背景版本，圖表則要重新設定背景、軸線、標籤與資料色。不要用全站濾鏡粗暴處理所有圖片。

深色模式會影響 SEO 嗎？

深色模式本身不是排名因素，也不會直接改變索引。但如果它改善或破壞閱讀體驗、CTA 可見度、圖片辨識和互動流程，就可能間接影響使用者行為表現。

網站一定要提供深色模式切換嗎？

不一定。若網站使用時間短、以表單或銷售轉換為主，應先評估成本與風險。若是長時間閱讀、SaaS 後台、開發者工具或影音產品，提供切換通常更有價值。

Design token 對深色模式有什麼幫助？

Design token 能把顏色從單一色碼變成可維護的語義規格。元件讀取 surface-primary、text-primary、border-subtle 等 token 後，就能依主題自動對應正確色值。

使用者手動切換和系統自動切換，哪個優先？

使用者手動切換應優先。建議順序是手動選擇、已儲存偏好、系統偏好、網站預設。這樣可以避免系統設定覆蓋使用者在網站內做出的明確選擇。

深色模式上線前最容易漏檢哪些地方？

最容易漏掉表單錯誤狀態、focus ring、disabled、loading、白底圖片、圖表 tooltip、第三方 iframe、CMS 舊文章和內部連結。QA 應從元件狀態一路檢查到真實內容頁。