官網『暗黑模式切換』(Dark Mode Toggle) 設計完整攻略：中小企業如何用一顆看似『潮』的小按鈕，讓晚上滑手機的訪客不會被白光嚇跑

你的官網，晚上 11 點被打開的次數比你想像的多

先講一個很多老闆沒想過的畫面：客戶白天上班在忙自己的事，真正有空「認真研究要跟哪一家合作」的時間，往往是晚上洗完澡、躺在床上滑手機那半小時。房間燈已經關了、手機亮度也調到最低，這時候他點進你的官網，如果整個畫面「唰」一下白光噴出來，他直覺反應通常只有兩種：一種是把手機拿遠一點瞇著眼看幾秒就退出，一種是心裡默默記一筆「這網站好刺眼」然後改天再說。改天就是永遠。

這就是為什麼「暗黑模式切換」(Dark Mode Toggle)，這幾年會從純粹工程師社群的偏好，慢慢變成一般中小企業官網也開始被問到的元件。但問題也隨之而來：中小企業官網真的需要嗎？做了之後會不會反而變成扣分？這篇就用實務角度，把該做不該做、要做要怎麼做，一次講清楚。

Photo by Egor Komarov on Unsplash

先看數據：晚上瀏覽的比例，比你以為的高

如果你有裝 GA4，可以打開「使用者屬性 > 時間」看看訪客到訪時段的分佈。以一般中小企業客戶的觀察，B2C 網站晚上 8 點到隔天凌晨 1 點的流量，通常會佔全日的 30%~45%；B2B 網站雖然白天比例高，但晚上詢問單送出的轉換率反而常常比白天高——因為老闆下班後才有時間認真研究。這個時段的訪客有一個共同特徵：他們大多在「黑黑的環境」裡滑手機。

iOS 從 2019 年、Android 從 2019 年開始內建系統級暗黑模式，到現在打開的比例，根據多份使用者研究，在 25 到 45 歲族群裡大概有 60%~80% 的人會把手機設成常駐暗黑模式或跟隨日夜切換。也就是說，晚上打開你官網的訪客，超過一半以上的手機是「已經預期整個畫面應該是暗色系」。你的白底黑字網頁在他手上，就是那個突然閃出來的白光。

三個「應該做」的理由，跟一個「不必做」的例外

理由一：降低夜間跳出率。這是最直接的效益。你不需要讓所有訪客都手動切換，只要讓瀏覽器可以「跟隨系統」——當使用者手機已經是暗黑模式，你的官網自動變成暗色。對訪客來說完全無感，但體感舒適度會差很多，跳出率自然會降。

理由二：讓品牌看起來「有在跟」。這一點很現實。當一個訪客先看過競爭對手，發現對方晚上打開網站是暗色的、你的還是傳統白底，他會下意識覺得對方「比較新、比較懂使用者」。這種第一印象很難量化，但影響信任感。

理由三：對眼睛友善這件事，可以說出來。你如果在網站上寫一句「為了不打擾您的夜晚，我們支援深色模式」，這種微小的貼心會被記住。中小企業要贏，靠的就是這些細節。

不必做的例外：如果你的官網是形象網站、頁數少（不超過 5 頁）、圖片多過文字、而且主要客戶都是白天透過廣告點進來就馬上填單，那老實說「暗黑模式」對你的轉換率影響非常有限。這種情況下把預算花在別的地方（例如提升頁面速度、優化 CTA 按鈕、加強表單體驗）投報率會更高。做官網從來不是「別人有我也要有」，而是「這一塊值不值得花」。

Photo by Rishabh Pammi on Unsplash

做了反而扣分的四種常見錯誤

看太多網站硬加了暗黑模式，結果反而變成一種「業餘感」。整理成四種最常見的錯誤：

錯誤一：只把背景反黑，內容沒調。這是最多人踩的坑。背景從白變黑之後，原本設計好的品牌配色、圖片、按鈕顏色全都失衡。原本橘色 CTA 在白底上很醒目，換到黑底突然變得刺眼；原本淺灰色的副標題文字，在黑底上直接消失。做暗黑模式不是「反轉顏色」，而是「重新設計一套色板」。這件事沒有捷徑。

錯誤二：切換之後畫面「閃一下」。這是技術問題。使用者第一次進入頁面時，如果 JavaScript 還沒載完就顯示了預設白色，然後才「唰」變成黑色，這個閃爍會讓使用者很不舒服。正確做法是把主題判斷寫在 HTML 最前面（inline script），讓瀏覽器渲染第一畫素之前就決定好顏色。這是前端工程師的細節功。

錯誤三：切換之後沒記住。使用者切到暗黑模式之後，換了一頁又變回白色，這種體驗會直接讓人抓狂。基本要求是用 localStorage 記住偏好，跨頁面、下次回訪都要延續。

錯誤四：切換按鈕放在很難找的地方。有些網站把切換做在 Footer，或藏在「更多」的下拉選單裡。使用者根本找不到，等於沒做。建議放在導覽列右上角，用一個太陽/月亮的簡單 icon，讓人一眼認得出。

暗黑模式切換的實作要點

1. 三種狀態，不是兩種。很多人以為只有「亮色」跟「暗色」兩種，其實還有一個更重要的第三種：「跟隨系統」。而且這個應該是預設值。使用者手機已經是暗黑模式，你的網站就跟著暗；他早上起來把手機切回亮色，你的網站也自動切回來。這才是最貼近使用者習慣的做法。

2. 圖示的選擇。最通用的是「太陽/月亮」交替，一看就懂。不建議用文字寫「日間模式/夜間模式」，因為切換的當下訪客的眼睛正忙著適應顏色變化，讀文字反而多一層負擔。也不建議用「電燈泡」或「星星」這種比較曖昧的圖示。

3. 色彩對比度要通過 WCAG AA 標準。這是無障礙規範，也是實務底線。文字對背景的對比度至少要 4.5:1，大標題可以放寬到 3:1。暗黑模式不代表「純黑背景 + 純白文字」，事實上這種組合對比度太高反而傷眼睛。建議背景用 #121212 或 #1a1a1a，主要文字用 #e0e0e0 左右，這個配色是很多大廠實驗過最舒服的範圍。

4. 圖片的處理。這是被忽略最多的一環。你的產品照、Logo、案例截圖，在暗黑模式下可能會顯得「格格不入」。專業做法是：Logo 準備一套白色版本，讓它在暗色背景上依然清楚；產品照片如果是白底去背，可以透過 CSS 稍微降低亮度或加一層暗色遮罩，讓它跟暗色背景融合。

5. 表單、按鈕的狀態要重新想過。CTA 按鈕在白底時，可能用主色橘色最醒目；換到黑底後，你可能需要略調亮度或改用更飽和的顏色，才能保持「點下去」的視覺誘因。這一塊真的要看實測，不能一次做完就丟著。

Photo by Polina Kuzovkova on Unsplash

預算跟時程怎麼估？

如果是既有網站要「事後補做暗黑模式」，通常需要重新盤點所有頁面的顏色使用，工時大約會落在 2 到 5 個工作天不等——差距在於「原本 CSS 有沒有用變數管理色彩」。如果一開始就用 CSS Variables 或設計系統管理色板，加暗黑模式只是多寫一份色票，一天內可以搞定；如果是硬編碼寫死顏色的老專案，就得逐頁改，工時會爆炸。

這也帶出一個給還沒做網站、或即將改版的老闆的建議：不管你這次要不要上暗黑模式，都請設計師/工程師用「色彩變數」的方式管理配色。這是未來三年網站都會用得到的基礎建設，做在第一天成本幾乎為零，做在第五年就是重寫。

實務判斷：這 3 個問題可以幫你決定要不要做

與其看別人有沒有做，不如問自己這三題：

問題一：你的訪客晚上 8 點到凌晨 1 點的流量佔比超過 25% 嗎？如果是，做。如果不到 10%，先放著。

問題二：你的官網文字內容多嗎？部落格、知識庫、產品說明頁面很多的網站，訪客會停留閱讀，暗黑模式的效益就明顯。反過來說，如果是幾乎沒有文字、以圖片為主的作品集網站，需求度就低很多。

問題三：你未來一年內會改版官網嗎？如果會，那乾脆把暗黑模式一起做進去，成本會低很多。如果沒有改版計畫、只是想「補一個功能」，可能得先評估上面提到的工時是否值得。

結語：不是潮不潮的問題，是有沒有把訪客當一回事

暗黑模式切換這個小小的按鈕，表面上看起來是「跟風」的設計元素，實際上反映的是一件事——你有沒有想過訪客是在什麼情境下打開你的網站？當你開始認真回答這個問題，你會發現網站上還有非常多可以改善的細節：手機字體會不會太小、按鈕會不會太靠邊、詢問單會不會問太多。這些看起來不痛不癢的地方，加起來就是讓客戶「留下來」還是「馬上走」的差別。

如果你的官網已經上線一段時間，還沒有暗黑模式，不用急著明天就補上。第一步先打開 GA4 看夜間流量佔比，第二步問自己「訪客晚上打開網站時，我希望他有什麼感覺」，第三步再回來評估工時與效益。做網站從來不是把所有流行元素塞好塞滿，而是把每一個細節都做到「為了訪客而做」。這才是中小企業官網最扎實、也最容易被競爭對手忽略的優勢。