深色模式要不要做？成本與效益一次算給你看

「網站可以做深色模式嗎？」可以。「應該做嗎？」這要算一筆帳。深色模式不是開個開關就好，它實際上是再設計一整套配色系統，這篇把成本和效益攤開來讓你自己判斷。

成本比你想的高

深色模式不是把背景變黑、文字變白就完事：

• 色彩全面重調：品牌色在深色背景上的對比度會改變，飽和色在黑底上會「發光」刺眼，通常需要調降飽和度另外定一組色票
• 圖片與插圖：白底商品照放在深色頁面上像貼了張紙；LOGO 如果是深色的，直接消失。每張視覺素材都要檢查，有些要準備兩個版本
• 陰影失效：淺色介面靠陰影表達層次，深色背景上陰影幾乎看不見，要改用邊框或亮度差來分層
• 持續維護：之後每次改版、每張新 Banner，都要檢查兩種模式，維護成本永久 +30% 起跳

效益取決於你的網站類型

深色模式的價值和「使用情境」高度相關：

網站類型	建議
內容型（部落格、文件、社群）	✅ 值得，長時間閱讀者受益明顯
工具型（後台、Dashboard）	✅ 值得，重度使用者常有偏好
形象官網、活動頁	⚠️ 效益低，訪客停留短，品牌視覺一致性反而更重要
電商	⚠️ 慎重，商品照在深色背景的呈現是大工程

折衷方案：尊重系統，但不強求

如果預算有限又想照顧深色偏好的使用者，最低成本的做法是用 prefers-color-scheme 至少確保不刺眼——例如把純白背景在深色模式下換成淺灰紙色，微調而非重造。完整的雙主題留給真正需要的下一次改版。

我們的結論

形象官網優先把預算花在行動版體驗和載入速度上，這兩件事影響每一位訪客；深色模式影響的是一部分訪客的一部分情境。先做對所有人都有感的事，行有餘力再談偏好。