視覺樣式詞條 3-35

深色模式Dark Mode

也常叫做：深色模式、暗色模式、Dark Mode

你可能會這樣說

想提供深色版本讓晚上看好舒適，但切過去之後顏色對比亂掉、圖片白得刺眼，比不提供還糟。

深色模式不是「把所有顏色反轉」。正確做法是另訂一套色彩權杖：背景用「帶一點藍的深灰」而不是純黑、文字用灰白而不是純白，降低刺眼度。

原本的品牌色常常要降飽和、提亮度：淺色模式裡的深藍按鈕，在深色底上要換成較亮的藍，才有足夠對比又不「震動」。

實作上就三件事，跟 AI 講一次它就會做：提供切換開關、記住訪客的選擇、第一次跟著系統設定。

深色模式目前：淺色

自動跟隨系統目前：手動

深色模式就是一個開關加上兩套配色——撥了馬上生效，不用按儲存。

圖 3-35　撥撥看——開關的重點是「撥了馬上生效」。

中文就可以

請幫網站加上深色模式：
用 CSS 變數定義兩套主題，切換開關放頁首，選擇存進瀏覽器。
第一次進站跟著系統偏好，之後以訪客手動選擇為準。
深色主題的背景用深灰帶藍、文字用 90% 白，主色調亮並降飽和。
兩種模式各截一頁給我檢查對比與圖片表現。