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