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