我是 App 設計背景出身，深色模式大概是我做到中期才出現的東西；台灣那時還沒很多人做，真正普及是這幾年 Figma 能設定 variables 之後。網頁的部分做亮暗色還是偏少，除非偏系統、工具或是社群向，不然個人或公司網站其實滿少見，還是會以自己想要傳達的風格為主。
這篇會快速交代 Dark Mode 的來由，重點放在兩件事：為什麼要做，以及怎麼在 Framer 做出來，包含我自己是怎麼設 Color Style 深色值的。
Dark Mode 是怎麼來的
深色介面其實比淺色更早：早期終端機天生就是黑底綠字，後來為了模擬「白紙黑字」，白底才當了三十年主流。轉折點在 2018–2019 年：OLED 普及、三大作業系統內建深色模式、CSS prefers-color-scheme 到位，到了現在對一般民眾來說這更像保護眼睛，Dark mode 從此成為標配。對於我們設計師來說照顧用戶的體驗感受則是相當重要。
為什麼系統、工具向的網站建議做 Dark Mode
系統一致性（對網站最重要）：使用者切成深色後會期待介面跟著變，突然亮白的網頁會造成體驗斷裂，尤其晚上。
低光環境更舒適：暗處看白底螢幕，強烈亮度差會造成眩光與疲勞，深色能縮小螢幕與環境的落差。
OLED 省電：深色像素功耗低，對行動裝置續航有實質幫助。
內容更突出：影音、照片、程式碼在深底上更突出——這也是影音平台和開發工具幾乎都預設深色的原因。
這就是一種偏好：對不少人而言深色就是審美選擇，提供選項本身就是加分。
💡 誠實面對限制：Dark Mode 不等於「更護眼」。研究顯示長篇閱讀在亮底深字下可讀性反而較佳，散光使用者看深底亮字也容易光暈（halation）。所以正解是兩種都提供、預設跟隨系統、讓使用者自己選，而不是把深色當唯一正解。
Framer 前的設計共識
看到很多人說或是 AI 也這樣提到：盡量不要用純黑 #000000 當背景：對比過強、容易疲勞。業界慣例是深灰，例如 #121212 或 #0D0D0D～#1A1A1A 這個區間。
💡 但根據個人經驗研究：『大部分的 APP 跟 iOS 系統，也不少 Variables 都是純白純黑，所以至於要怎麼使用都還是要看自己，為什麼會選擇這顏色，原因是什麼，想要傳達的意涵是什麼』降低飽和度：淺色模式的高飽和品牌色放到深底上會刺眼，深色主題要改用去飽和、稍微提亮的色階。
對比度要實測：內文對比至少 4.5:1（WCAG AA）。「深灰底＋灰字」很容易不知不覺跌破標準。（這是網頁比較在意的，App 反而還好，不過於刺眼、照顧到所有使用者就好）
產品範例
再看幾個產品，會發現「深色要多深」沒有標準答案，只有取捨：
iOS 系統——純黑基底 #000000，搭配灰階分層：最底層用純黑，但往上疊的卡片、列表都是由深到淺的灰。純黑不是不能用，用了就要靠灰階把層次補回來。
YouTube——接近純黑的 #0F0F0F：使用影音產品要的是「畫面是主角、介面消失」，背景越暗越沉浸，但仍然刻意不用 #000，保留一點空間讓介面元素不至於和背景黏在一起。
Claude——溫和舒適的深灰 #202020：作為高頻率、長時間文字對話的 AI 工具，它選擇了彩度更低、視覺更溫和的深灰色。這種大面積的軟性深灰能有效降低純黑底配白字產生的光暈感，走的是極簡且注重長文閱讀的路線。
Google——帶有微冷色調的 #232429：Google 的深色並非死黑，而是融入了一點點藍色調的深灰。在搜尋和多功能整合的介面中，這種帶冷調的底色可以很好地與繽紛的服務圖標（例如 Gemini 的漸層極光色）完美融合，維持科技工具的俐落感。
Discord——深色優先的 #1C1D22：社群與工具型產品的代表，使用者大多長時間掛網的，所以預設就是這個偏冷的深灰底，淺色模式反而像是隱藏選項。
Spotify——經典暗黑 #121212：業界最經典的暗色標配之一，同時 Spotify 也是沒有淺色模式的「dark only」。
對 UI/UX 的網頁設計師：先分清你的網站屬於哪一種類型，再決定你怎麼使用
注重長文閱讀、資訊瀏覽：學 Claude / Google 使用彩度低、較溫和的深灰。
內容沉浸、影音至上：學 YouTube / Spotify 用接近純黑的極深色，讓內容跳出來。
工具型、社群長時間掛網：學 Discord 採用深色優先。
在 Framer 實作 Dark Mode
核心觀念：一切建立在 Color Styles 上
Framer 的深色模式機制很單純：每一個 Color Style 都可以同時擁有一個淺色值和一個深色值。只要全站的顏色都透過 Color Style 套用，主題切換時整個網站就會自動跟著變。不過目前 Framer 只能切兩種顏色，而且設定上無法分層級，所以在做網頁時不需要有太複雜的顏色設定
Step 1：建立「語意化」的 Color Styles
在 Assets 面板新增 Color Style（+ → Color → New Style）。關鍵是用「用途」命名，這邊不建議直接在 Framer 以「顏色」命名：
✅ Background/Primary、Surface/Primary、Text/Primary、Border/Primary、Accent/Primary
❌ White、Black、Gray 100
因為 Background 在深色下會變深灰，如果它叫 White，語意就亂了，維護的人（包括三個月後的你）會很痛苦，並且因為Framer無法分多層，所以在命名上通常都建議 Background/Primary 、Background/Secondary …等之類的方式去分會比較好，就會如表格下這樣。
Color Style | 淺色值（範例） | 深色值（範例） |
|---|---|---|
Background/Primary | #FFFFFF | #111111 |
Surface/Primary | #F5F5F5 | #1E1E1E |
Text/Primary | #111111 | #FFFFFF 87% |
Border/Primary | #E5E5E5 | #FFFFFF 12% |
Accent/Primary | 品牌色 | 品牌色降飽和、提亮 |
Step 2：全站只用 Color Styles 上色
文字（搭配 Text Styles）、背景、邊框、icon、效果，全部綁定 Color Style，一個 hardcode 的色碼都不要留。
Step 3：在畫布預覽深色模式
畫布下方選單有 light/dark 切換按鈕，快捷鍵 ⌘+N (alt+N) 。逐頁檢查，每個元件的每個狀態（hover、focus、表單錯誤）、手機平板的 breakpoint 都要切過去看，問題很常躲在某個 breakpoint 的某個狀態裡。
發佈之後：自動跟隨系統
發佈後不用額外設定，Framer 會依訪客系統的 prefers-color-scheme 自動套用。系統是深色的訪客，第一眼就是深色版。
如果你想更進一步、給訪客一顆自己切換的按鈕：Framer 原生還沒有這個開關，但可以用 code override 補上！而且好消息是不用自己寫程式或問 AI ，社群已經有現成、可以直接 remix 進專案的 Theme Toggle 元件，可以到網路上查查看～
如有想要了解更多的都歡迎直接聯繫我，可以回答我所知道的問題給您！