現(xiàn)在很多網(wǎng)站和應(yīng)用都加上了暗黑模式，晚上刷手機(jī)看電腦的時(shí)候，眼睛確實(shí)舒服不少。如果你也想給自己的網(wǎng)站加上這個(gè)功能，可能會(huì)覺得有點(diǎn)復(fù)雜——要改顏色、要切換、要保存用戶偏好……別擔(dān)心，咱們今天就用大白話，把這件事從頭到尾、系統(tǒng)化地捋清楚，保證你能聽懂，也能照著做。
在寫代碼之前，得先想清楚幾個(gè)事兒，這能避免你后面返工。
1. 核心目標(biāo)是什么？
首要目標(biāo)是保護(hù)視力、減少疲勞，特別是夜間使用場(chǎng)景。其次是省電（對(duì)OLED屏幕設(shè)備）。最后才是跟風(fēng)審美。別搞反了。
2. “暗黑”不等于“純黑”
很多新手一上來(lái)就把背景弄成#000000（純黑），文字弄成#FFFFFF（純白）。結(jié)果對(duì)比度極高，看久了反而刺眼。好的暗黑模式用的是深灰色系，比如#121212或#1E1E1E作為背景，文字用#E0E0E0這種淺灰，對(duì)比度適中，更柔和。
3. 不只是背景和文字
按鈕、邊框、輸入框、卡片陰影、圖標(biāo)……網(wǎng)站上的每一個(gè)有顏色的元素，你都得考慮它在亮色和暗色模式下分別應(yīng)該是什么顏色。特別是：
語(yǔ)義化顏色：成功（綠色）、警告（黃色）、錯(cuò)誤（紅色）、信息（藍(lán)色）這些顏色，在暗色背景下需要調(diào)整飽和度和亮度，以保證可讀性和視覺權(quán)重一致。
圖片和視頻：有些圖片在暗色背景下會(huì)顯得太扎眼，可能需要加個(gè)深色半透明遮罩，或者提供暗色版本的圖片。
4. 如何切換？
手動(dòng)開關(guān)：在網(wǎng)站顯眼位置（如頁(yè)眉或側(cè)邊欄）放個(gè)太陽(yáng)/月亮圖標(biāo)按鈕。
跟隨系統(tǒng)：檢測(cè)用戶設(shè)備的系統(tǒng)主題設(shè)置，自動(dòng)同步。這是現(xiàn)在最推薦的方式。
想清楚這些，畫個(gè)簡(jiǎn)單的草圖，把主要元素的兩種顏色標(biāo)出來(lái)，心里就有譜了。
這是實(shí)現(xiàn)暗黑模式最核心、最優(yōu)雅的技術(shù)手段。
1. 用CSS變量定義配色方案
以前我們寫顏色直接寫死，比如color: black;。現(xiàn)在我們要學(xué)會(huì)“定義變量”。
你看，我們給每種顏色起了個(gè)名字（變量），比如--color-background代表背景色。在亮色模式下它值是白色，在暗色模式下它值是深灰。這樣，我們后面所有用到顏色的地方，都不寫具體色值，而是用這個(gè)變量。
2. 使用變量
定義好了變量，怎么用呢？很簡(jiǎn)單。
這樣一來(lái)，只要我們把網(wǎng)頁(yè)<html>或<body>標(biāo)簽的data-theme屬性改成"dark"，所有使用了這些變量的元素顏色就會(huì)自動(dòng)變成暗色方案。切換主題就是改一個(gè)屬性的事。
3. 檢測(cè)系統(tǒng)偏好
怎么自動(dòng)跟隨系統(tǒng)呢？用CSS媒體查詢。
這段代碼意思是：如果用戶系統(tǒng)設(shè)置了暗色模式，并且我們沒有用data-theme="light"強(qiáng)行指定亮色，那么就自動(dòng)應(yīng)用暗色變量。
CSS負(fù)責(zé)定義和展示，JavaScript負(fù)責(zé)交互和記憶。
1. 創(chuàng)建切換按鈕
在HTML里放一個(gè)按鈕：
用CSS控制，默認(rèn)只顯示太陽(yáng)圖標(biāo)（亮色模式），暗色模式時(shí)通過CSS切換顯示月亮圖標(biāo)。
2. 用JavaScript控制切換
初始化：頁(yè)面一打開，就檢查用戶之前是否手動(dòng)選過主題（查本地存儲(chǔ)），沒選過就檢查系統(tǒng)設(shè)置，然后應(yīng)用對(duì)應(yīng)的主題。
切換：用戶點(diǎn)擊按鈕，就在亮色和暗色之間來(lái)回切換。
記憶：把用戶的選擇存到瀏覽器本地（localStorage），下次用戶再訪問，還是他喜歡的那個(gè)主題。
3. 處理系統(tǒng)主題變化
如果用戶在我們網(wǎng)站上選了“跟隨系統(tǒng)”，之后又在操作系統(tǒng)里切換了亮暗模式，我們網(wǎng)站也應(yīng)該跟著變。這需要監(jiān)聽系統(tǒng)變化：
第四部分：魔鬼在細(xì)節(jié)里——進(jìn)階優(yōu)化點(diǎn)
做到上面三步，一個(gè)可用的暗黑模式就有了。但要做得專業(yè)、體驗(yàn)好，還得摳細(xì)節(jié)。
1. 處理圖片和媒體
背景圖：深色背景下，太亮的背景圖很突兀。可以用CSS濾鏡或加半透明深色層。
圖標(biāo)：最好使用SVG圖標(biāo)，并用CSS變量控制其填充色（fill: var(--color-text)），這樣它們就能隨主題變色。
2. 過渡動(dòng)畫
顏色切換時(shí)，如果直接“閃”一下，很生硬。我們?cè)贑SS里給顏色相關(guān)的屬性都加上過渡效果。
3. 避免“白色閃爍”（FOUT）
如果用戶系統(tǒng)是暗色，但你的JS在頁(yè)面加載后才應(yīng)用暗色主題，用戶會(huì)先看到一瞬間的亮色頁(yè)面（閃白屏）。解決辦法：
在HTML的<head>里內(nèi)聯(lián)一小段關(guān)鍵的JS或CSS，盡快確定主題并應(yīng)用。或者，
給<html>標(biāo)簽先設(shè)置一個(gè)默認(rèn)的暗色類名，等JS加載后再精確調(diào)整。
4. 測(cè)試，測(cè)試，再測(cè)試
不同設(shè)備/瀏覽器：在手機(jī)、平板、電腦上都看看。
極端情況：關(guān)閉JavaScript，看網(wǎng)站是否還能基本可用（至少樣式正常）。
對(duì)比度測(cè)試：用無(wú)障礙檢測(cè)工具檢查兩種模式下的顏色對(duì)比度是否都達(dá)到WCAG標(biāo)準(zhǔn)（至少AA級(jí)），確保色弱、視力不佳的用戶也能看清。
一個(gè)系統(tǒng)化的暗黑模式實(shí)現(xiàn)流程就是：
規(guī)劃：想清楚顏色、組件、切換方式。
定義：用CSS變量統(tǒng)一定義兩套配色。
應(yīng)用：所有元素都使用CSS變量。
切換：用JavaScript實(shí)現(xiàn)按鈕點(diǎn)擊切換、跟隨系統(tǒng)、記憶選擇。
優(yōu)化：處理圖片、添加過渡、解決閃屏、全面測(cè)試。
最后幾個(gè)大實(shí)話提醒：
別追求一步到位：可以先給主要頁(yè)面和核心組件加上，再逐步覆蓋全站。
一致性比炫技重要：確保同一個(gè)顏色變量在整個(gè)網(wǎng)站代表相同的含義。
用戶選擇權(quán)第一：一定要提供簡(jiǎn)單明了的開關(guān)，并且尊重用戶的每一次選擇（保存好）。跟隨系統(tǒng)是默認(rèn)好選擇，但手動(dòng)開關(guān)必須存在。
加上暗黑模式，不僅僅是一個(gè)功能，更是一種對(duì)用戶使用場(chǎng)景的細(xì)致關(guān)懷。花點(diǎn)時(shí)間把它做好，你的用戶一定能感受到這份用心。慢慢來(lái)，從最核心的頁(yè)面開始實(shí)踐，你很快就能掌握這套系統(tǒng)化的方法。
聯(lián)系電話題-1.jpg)