某個客戶或員工不經意的一句「你們官網晚上看起來怎麼怪怪的」,常常是經營者第一次注意到,自己在電腦上看的官網,跟客戶用手機打開的官網,根本不是同一副長相。電腦沒開深色模式,顯示的還是原本設計好的淺色版面;同一個網址換成 Android 手機上的 Chrome、系統又設定成深色主題,底色會整個被反轉成深色,按鈕與強調色也跟著跑位,看起來不太像自己花錢做出來的那個網站。
這種落差不是網站壞掉,而是網站配色撞上了深色模式。多數企業網站其實從來沒有主動決定過要不要支援深色模式,只是被瀏覽器悄悄接管了顯示方式。換句話說,深色模式不是一個「要不要加裝」的新功能,它很可能早就在你的網站上發生,只是沒有人做過這個決定,這也是為什麼站方經常是事後才發現,而不是在規劃階段就談過。
先從瀏覽器到底在你的網站上做了什麼講起,再一路拆到你該怎麼判斷、又有哪幾條路可以選。
手機一設深色,你的網站也跟著變了嗎?
Google 從 Chrome 96 版開始,在 Android 系統上加入一個叫做自動深色主題的功能,只要使用者在手機系統裡打開深色模式,Chrome 就會自動幫沒有特別設計深色版本的網站,套上一層由瀏覽器自己生成的深色外觀,背景反轉成深色、文字對比重新調整,整個過程不需要網站經營者做任何設定,也不會事先詢問。

也就是說,你的網站不論有沒有規劃過深色模式,只要訪客的手機系統設成深色、又用 Android 上的 Chrome 瀏覽,就有可能已經被套用過這種由瀏覽器自動生成的深色版本。根據 HTTP Archive 在《Web Almanac 2022》CSS 篇章的統計,能讓瀏覽器判斷「這個網站有沒有專門設計深色版本」的 color-scheme 屬性,當年只有 0.2% 的網頁設定過。換句話說,絕大多數企業網站從來沒有主動決定過深色模式要怎麼呈現,呈現出來的樣子完全交給瀏覽器自己判斷。
這也是為什麼「為什麼我的網站在手機上看起來變黑了」會是不少經營者的第一個疑問,但答案通常不是網站中毒或版型跑掉,而是瀏覽器依照使用者的系統設定,自動幫你的網站生成了一個沒有人檢查過的深色版本。搞懂這一層,起點就不該是「要不要加裝深色模式」,而是先確認你的網站現在被自動套用成什麼樣子,你自己有沒有親眼看過。
深色模式的開關,其實不在你的網站上
多數人講到深色模式,第一個念頭是「我們的網站要不要加一顆切換深色、淺色的按鈕」,但這個問法本身可能就問錯了層級。深色模式真正的開關,通常不在個別網站上,而是在使用者的手機或電腦系統設定裡;你的網站能讀到的,其實是訪客系統裡設定好的偏好,不是網站自己開出來的選項。web.dev 上一篇由 Thomas Steiner 撰寫的技術說明就指出,瀏覽器是透過 prefers-color-scheme 這個機制,直接讀取使用者在作業系統層級設定好的深淺色偏好,再把這個偏好帶進網頁,網站頂多是回應這個偏好,不是主動創造它。
也就是說,一個訪客會不會看到深色畫面,九成取決於他自己手機或電腦怎麼設定,跟你的網站有沒有做深色模式關係不大。Nielsen Norman Group 一份 2023 年由 Amy Zhang 與 Tanner Kohler 主持、針對 115 位手機使用者的調查也發現,受訪者多半是在系統層級思考深色模式這件事,而不是逐一去記哪個 App、哪個網站有沒有支援;大部分人也不會因為單一網站沒有深色版本就轉身離開,甚至事後根本想不起來哪個網站有做、哪個沒有。
深色模式主要是手機或電腦系統的功能,網站頂多是配合的一方。這也代表少了深色模式,不會是訪客流失的關鍵原因,你可以放心把力氣留到下一個問題,如果真的要投入,到底值不值得。
該不該投入深色模式?先看這幾個判斷點
了解深色模式從何而來、由誰決定之後,真正要回答的問題只剩一個,就是你的網站值不值得認真投入。這裡沒有一個放諸四海皆準的答案,比較實際的做法,是拿幾個判斷點回頭檢查自己的網站,符合的項目越多,深色模式對你的投資報酬就越高;符合得少,也不代表你的網站有問題,只是深色模式暫時不是優先項目。接下來這四個判斷點,分別看訪客停留與回訪的頻率、產業與內容的調性、品牌顏色換了背景還站不站得住,以及你的客群平常慣用什麼樣的介面。

訪客會在你的頁面停留多久、多常回來
第一個判斷點,是訪客通常在你的網站上待多久、多常回來。如果你的網站比較像一份介紹型的名片官網,訪客平均可能只停留幾十秒到一兩分鐘就離開,查個地址、看個菜單或服務項目就走,深色模式能省下的眼睛負擔,小到訪客幾乎感覺不到差異。
但如果你的網站屬於內容常被回頭查閱、甚至被讀者收藏起來反覆瀏覽的類型,像是部落格、知識庫或資源型網站,這個判準的份量就會明顯提高。Nielsen Norman Group 的調查裡也提到,長時段使用與高頻率使用,是最值得投資深色模式的兩個情境判準,道理不難懂,讀者盯著螢幕的時間越長、回來的次數越多,深色背景能減輕的視覺疲勞就越有感;偶爾路過看一眼的訪客,則幾乎感受不到差別。
你的產業形象,跟深色調性合不合?
第二個判斷點比較主觀,但同樣重要,同樣要看你的產業形象,跟深色調性合不合。這沒有標準答案,純粹是感覺搭不搭的問題。舉例來說,一家攝影工作室的作品集網站,或是強調技術質感的工具型網站,深色背景通常更能撐起專業、尖端的印象,照片的顏色與細節在深色底色的襯托下也更容易被看清楚。相對地,一間提供居家照護服務、需要讓人長時間安心閱讀的機構網站,淺色版面通常還是比較討喜,親和與信任感是這類服務更該優先顧到的調性。
換句話說,把網站背景換成深色之後,你會覺得這個產業、這個服務「變得更有質感」,還是反而覺得「有點不對勁」?這個問題的答案越傾向前者,深色模式的加分效果就越明顯。
你的品牌顏色,換了背景還認得出來嗎?
第三個判斷點,回到品牌識別本身,網站換成深色背景之後,你的 Logo、主色、按鈕顏色還看得清楚嗎,還是不是你熟悉的那個品牌?多數網站的 Logo 是透明背景的圖檔,原本是為淺色底設計的,一旦背景換成深色,很容易變得模糊不清、對比不足,甚至整個融進背景裡看不出輪廓。web.dev 上一篇技術文章就提到,圖片與圖示在深色模式下需要另外處理色調與對比,連 Apple 都為此設計了「智慧反轉」機制,刻意讓照片、圖示這類媒體不被系統自動反轉顏色。也就是說,連平台自己都認為圖像資產不能被隨便反轉了事。
這也是為什麼深色模式該被當成一項需要有人實際檢查過的決策成本,而不是「背景顏色反過來」這麼簡單的事。Chrome for Developers 的說明裡也指出,網站其實可以選擇讓特定元素不套用自動深色,代表這件事本來就可以被主動決定,不是只能照單全收。隨手讓瀏覽器自動套用出來的深色版本,跟真正花時間檢查過每個品牌元素的深色版本,兩者的觀感落差非常大。
你的客群,習慣使用深色介面嗎?
最後一個判斷點,是你的客群平常慣用什麼樣的介面。不同族群對深色模式的熟悉度與偏好落差不小,如果你的客群偏向技術或設計相關從業者,他們日常使用的開發工具、設計軟體本來就大量使用深色介面,對深色模式的接受度通常比較高;如果客群是一般消費大眾,深色模式的熟悉度就會落差比較大,有人習慣、也有人幾乎沒用過。
不過這裡要老實說清楚,目前並沒有一份夠明確的研究,能斷定哪個族群就是比較愛深色模式。Nielsen Norman Group 的調查裡雖然提到,深色模式對有白內障等眼球混濁狀況的使用者可能有幫助,但同時也強調應該尊重使用者在系統層級自己做的選擇,而不是把這個觀察硬套到整個客群頭上,變成「我們的客群就是需要深色模式」這種一刀切的結論。與其憑印象猜測,不如先實際了解自己訪客的裝置與瀏覽習慣,再回頭對照前面幾個判斷點一起看。
沒做好的深色模式,比沒有更容易流失訪客
這四個判斷點沒有一項是及格與否的成績單,加起來看的是你的網站值不值得認真投入。但比「要不要做」更容易被忽略的,是另一個風險,那就是放任瀏覽器自動生成深色版本,卻從來沒有打開來檢查過,反而是風險最高的一種狀態,比乾脆不做深色模式還容易讓訪客覺得這個網站不夠專業。
Nielsen Norman Group 的調查整理出幾個深色模式最常見的觀感瑕疵:圖形或圖示在深色背景裡直接消失不見、文字與背景的對比不夠、讀起來很吃力,還有原本用來營造層次感的陰影效果,一到深色背景就失真,變得格格不入。這幾個問題單獨看都不算大事,但只要同時出現在同一個網站上,加總起來就會讓訪客直覺得出一個結論:這個網站沒做好。
這也是為什麼深色模式比較適合當成一翻兩瞪眼的決定,而不是可以隨便都可以的中間地帶,要嘛花時間真正設計、檢查過一輪再上線,要嘛乾脆主動選擇退出,讓所有訪客都看到你檢查過的那個淺色版本。Chrome for Developers 也提到,如果瀏覽器自動生成出來的深色主題效果不理想,網站其實可以選擇讓頁面不套用這個自動機制,與其讓訪客看到一個沒人把關過、看起來像故障的畫面,不如主動退出,至少維持一個檢查過、觀感一致的版本。
深色模式怎麼選?三條路線各有取捨
把前面幾個判斷點兜起來看,深色模式其實只有三條路線可以選,各自的取捨也不一樣。

- 跟著系統預設走:什麼都不特別處理,讓瀏覽器依照訪客的系統偏好自動生成深色版本,不需要額外投入設計或開發成本。風險是瀏覽器自動生成的版本沒人檢查過,萬一效果不理想,反而比沒有深色模式更傷觀感。
- 主動選擇不套用:確保所有訪客看到的都是你已經檢查過的唯一版本,只維持淺色版面。這條路線適合前面幾個判斷點大多沒中、產業調性也偏向需要穩定信任感的網站,與其冒風險讓瀏覽器自動套用,不如乾脆守住單一版本。
- 真正投入設計一套深色版本:甚至加上讓訪客手動切換深淺色的按鈕。這條路線成本最高,但如果前面的判斷點大多命中,投入的效益也相對明確。
真的決定往第三條路線走,Nielsen Norman Group 給的實作建議是:預設仍要跟隨系統設定,而不是強迫所有訪客使用同一種模式;測試也不能只做在網頁上,電子報之類的溝通管道要一併檢查在深色模式下的呈現,因為信箱軟體不一定會照著你網站的設定走。
電商、顧問服務、作品集,答案通常不一樣
把前面整套判斷框架套進幾種常見的網站類型,同一套邏輯放進不同產業,得出的結論落差不小。
像是一家做外銷的中小企業官網,產品資訊、認證、聯絡方式都需要讓陌生訪客一眼建立信任感,這類強調信任的電商或服務型網站,淺色版面通常還是比較安全的預設,訪客翻閱時間不長、產業調性也偏向穩重,深色模式的加分有限,風險反而比較高。
換一個情境,像是一位接案設計師的作品集網站,狀況就不一樣了。作品集本身就是靠視覺說話,深色背景能讓作品的顏色與細節更跳出來,產業調性也偏向能接受、甚至偏好深色的質感呈現,這類設計導向的網站,深色模式反而是加分項。
至於一個經營多年的產業知識部落格,答案又更清楚一點。Nielsen Norman Group 的調查裡也提到,像新聞網站、電子書閱讀器這類長時間使用的場景,讀者停留與回訪的頻率本來就高,跟一般路過型網站的判準明顯不同,內容型知識網站的讀者常常一次讀十幾分鐘、甚至把文章加入書籤反覆查閱,深色模式在這種情境下,值得認真列入投入清單。
回到最開始那句「你們官網晚上看起來怪怪的」,與其急著決定要不要加裝深色模式,不如先問自己三個問題:訪客會不會常常回來看你的網站、看得夠久?你的品牌顏色換了深色背景,還站得住、還認得出來嗎?如果暫時不打算真正投入設計,至少要不要主動選擇退出,而不是放任瀏覽器自己套用一個沒人檢查過的版本?
這三題答完,你大概就知道深色模式對你的網站,是該認真規劃的下一步,還是先按下退出鍵,把力氣留到其他更迫切的地方。
