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