使用css變量實現暗黑模式的核心步驟包括：1. 定義變量，2. 應用變量，3. 通過JavaScript切換類名。首先，在:root中定義亮色模式的顏色變量，在body.dark-theme中重新定義為暗色變量；其次，將這些變量應用到各個元素的樣式中；最后，通過javascript控制body類名切換，并利用localstorage保存用戶偏好，同時可結合系統偏好自動適配。這種方法集中管理顏色、性能高效且支持動態交互。
css中實現暗黑模式，核心思路就是利用CSS變量（Custom Properties）來定義一套可切換的顏色體系。你可以在:root偽類中定義默認（通常是亮色）的顏色變量，然后通過給body或html元素添加一個特定的類（比如dark-theme），在這個類里面重新定義這些變量的值，賦予它們暗色系的顏色。配合一點JavaScript來切換這個類，就能實現主題的動態切換了。這種方案的好處是集中管理顏色，維護起來非常方便，而且性能也很好。
解決方案
要實現暗黑模式的顏色變量切換，大致可以分三步走：定義變量、應用變量、以及通過JavaScript進行切換。
首先，在CSS中定義你的顏色變量。我通常會把亮色模式的顏色作為默認值放在:root下，這樣它們是全局可用的。
立即學習“前端免費學習筆記（深入）”；
/* 定義亮色模式的顏色變量 */ :root { --background-color: #ffffff; /* 主背景色 */ --text-color: #333333; /* 主要文字顏色 */ --primary-color: #007bff; /* 主題色 */ --border-color: #e0e0e0; /* 邊框顏色 */ --card-background: #f8f8f8; /* 卡片背景色 */ } /* 定義暗黑模式的顏色變量，通過一個類名切換 */ body.dark-theme { --background-color: #1a1a1a; --text-color: #f0f0f0; --primary-color: #8bb4e7; --border-color: #3a3a3a; --card-background: #2a2a2a; } /* 應用這些變量到你的元素上 */ body { background-color: var(--background-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; /* 平滑過渡 */ } a { color: var(--primary-color); } .card { background-color: var(--card-background); border: 1px solid var(--border-color); padding: 20px; margin: 15px 0; border-radius: 8px; transition: background-color 0.3s ease, border-color 0.3s ease; }
接著，在html中準備一個觸發切換的按鈕，以及一個用于存儲用戶主題偏好的地方（比如body元素本身）。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>暗黑模式示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>我的網站</h1> <button id="theme-toggle">切換主題</button> </header> <main> <p>這是一段示例文本，用來展示不同主題下的顏色效果。</p> <div class="card"> <h2>卡片標題</h2> <p>卡片內容，這里有一些重要的信息。</p> </div> </main> <script src="script.js"></script> </body> </html>
最后，用JavaScript來控制body元素的類名切換。同時，我通常會考慮用戶的系統偏好（prefers-color-scheme）和本地存儲，這樣用戶下次訪問時能記住他的選擇。
// script.js document.addEventListener('DOMContentLoaded', () => { const themeToggleBtn = document.getElementById('theme-toggle'); const body = document.body; // 檢查本地存儲中是否有用戶設置的主題 const savedTheme = localStorage.getItem('theme'); // 檢查用戶系統偏好 const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; // 初始化主題 if (savedTheme) { body.classList.add(savedTheme); } else if (prefersDark) { body.classList.add('dark-theme'); } else { // 默認是亮色模式，不需要添加類 } // 切換主題的事件監聽器 themeToggleBtn.addEventListener('click', () => { if (body.classList.contains('dark-theme')) { body.classList.remove('dark-theme'); localStorage.setItem('theme', 'light-theme'); // 假設亮色模式對應'light-theme'，實際是移除dark-theme類 } else { body.classList.add('dark-theme'); localStorage.setItem('theme', 'dark-theme'); } }); // 監聽系統主題變化（可選，但推薦） window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { // 如果用戶沒有明確設置過主題，則跟隨系統 if (!localStorage.getItem('theme')) { if (event.matches) { body.classList.add('dark-theme'); } else { body.classList.remove('dark-theme'); } } }); });
為什么推薦使用CSS變量實現暗黑模式？
說實話，在前端開發中，實現暗黑模式的方法有很多種，比如單獨一套暗黑模式的CSS文件，或者利用CSS預處理器（如sass、less）的變量和混合器來生成兩套樣式。但我個人覺得，CSS變量（Custom Properties）無疑是目前最優雅、最靈活也最易于維護的方案。
首先，從維護性上講，所有的顏色定義都集中在:root和.dark-theme這兩個地方，一目了然。如果某個品牌色需要調整，你只需要改動一個變量的值，所有使用了這個變量的地方都會自動更新，這比維護兩套獨立的CSS文件要省心太多了。以前我遇到過那種亮色和暗色樣式散落在不同文件里的項目，每次改顏色都像在玩“大家來找茬”，效率非常低。
其次是性能和用戶體驗。使用CSS變量切換主題，本質上只是增刪一個CSS類名，瀏覽器只需要重新計算受影響的CSS變量值，然后重新渲染。這個過程非常輕量級，幾乎不會引起頁面的重繪和重排，所以切換起來非常流暢。相比之下，如果通過加載不同的CSS文件來切換，瀏覽器可能需要重新解析整個樣式表，這在文件較大時可能會有明顯的卡頓感。而且，CSS變量天生支持transition，可以輕松實現顏色切換時的平滑過渡效果，讓用戶體驗更上一層樓。
再者，靈活性也是一個重要考量。CSS變量是動態的，你可以通過JavaScript在運行時修改它們的值，這為更復雜的交互和個性化主題提供了無限可能。比如，你甚至可以允許用戶自定義某個元素的顏色，而不需要寫額外的CSS規則。這種原生支持動態修改的特性，是預處理器變量無法比擬的。
如何確保暗黑模式的顏色對比度符合可訪問性要求？
確保暗黑模式的顏色對比度符合可訪問性要求，這絕對是一個不能忽視的重點，因為它直接關系到你的網站對所有用戶的友好程度，尤其是視力受損的用戶。我在這方面吃過不少虧，所以深知其重要性。
最核心的原則就是遵循Web內容可訪問性指南（WCAG）2.1標準，其中對文字與背景的對比度有明確要求：常規文本至少達到4.5:1，大號文本（18pt或24px以上，或14pt/18.66px粗體）至少達到3:1。對于非文本內容，比如圖標、圖形元素，也有相應的對比度要求。
在實踐中，我通常會這樣做：
-
使用對比度檢查工具：這不是偷懶，而是提高效率的必備。有很多在線工具（比如WebAIM Contrast Checker，或者瀏覽器開發者工具自帶的顏色選擇器）可以幫你實時檢查顏色組合的對比度。在設計暗黑模式的配色方案時，我會反復用這些工具來驗證每一對文字與背景色、圖標與背景色。別憑感覺走，數據不會騙人。
-
選擇合適的基色：暗黑模式并非簡單地把所有顏色反轉。理想的暗色背景通常不是純黑（#000000），而是略帶灰度或深藍色的背景（比如#1a1a1a, #212121），這樣可以減少眼睛的疲勞感，同時更容易搭配出高對比度的文本顏色。同樣，文本顏色也不要用純白，稍微偏灰的白色（#f0f0f0, #e0e0e0）會更柔和。
-
注意狀態色和強調色：按鈕、鏈接、警告信息等元素的顏色在暗黑模式下也需要重新考量。它們的對比度同樣要達標，并且要保持其原有的語義。比如，一個紅色的錯誤提示，在暗黑模式下可能需要調整為更亮、更飽和的紅色，以確保它仍然醒目且易于識別。
-
測試不同屏幕和光照環境：我發現一個有趣的現象，在我的高分辨率顯示器上看起來很棒的暗黑模式，到了老舊的筆記本屏幕上，或者在強光照射下，對比度可能就變得很差。所以，在不同設備、不同亮度環境下進行實際測試是非常必要的。
-
考慮色盲用戶：除了對比度，還要考慮色盲用戶。避免僅通過顏色來傳達信息，應該結合圖標、文字說明或下劃線等其他視覺提示。例如，一個表示“成功”的綠色按鈕，如果用戶是紅綠色盲，可能就無法區分，所以最好加上一個對勾圖標。
總的來說，可訪問性不是一個事后諸葛亮的問題，它應該在設計和開發暗黑模式的初期就被納入考慮。
如何處理用戶系統偏好（prefers-color-scheme）與手動切換的優先級？
這是一個非常實際的問題，因為用戶可能在操作系統層面設置了偏好（比如macos或windows的暗色模式），同時你的網站又提供了手動切換主題的按鈕。如何平衡這兩者，讓用戶體驗既智能又可控，確實需要一些策略。
我的經驗是，優先尊重用戶的顯式選擇，其次再考慮系統偏好。也就是說，如果用戶手動點擊了你的網站上的主題切換按鈕，那么這個選擇應該覆蓋掉操作系統的設置。只有當用戶沒有明確選擇時，網站才應該跟隨操作系統的偏好。
具體實現上，可以這樣操作：
-
初始化時檢測系統偏好：當頁面加載時，首先通過window.matchMedia(‘(prefers-color-scheme: dark)’)來檢測用戶當前的系統主題偏好。如果系統是暗色模式，并且用戶之前沒有在你的網站上明確設置過主題，那么就將網站設置為暗色模式。
-
利用本地存儲記錄用戶選擇：每次用戶通過你的主題切換按鈕手動更改主題時，將這個選擇（比如dark或light）存儲到localStorage中。這樣，用戶下次訪問網站時，你可以首先檢查localStorage。如果存在用戶明確設置的主題，就直接應用它，忽略系統偏好。
-
監聽系統偏好變化（可選但推薦）：雖然用戶手動設置會覆蓋系統偏好，但如果用戶在沒有手動設置過網站主題的情況下，在操作系統層面更改了主題，你的網站也應該能及時響應。這可以通過監聽matchMedia的change事件來實現。當系統主題變化時，如果localStorage中沒有明確的用戶設置，就更新網站主題。
-
提供重置或“跟隨系統”的選項（高級）：有些用戶可能希望網站能夠“忘記”他們的手動選擇，重新跟隨系統主題。你可以提供一個額外的按鈕，清除localStorage中的主題設置，這樣網站就會再次回到跟隨系統偏好的狀態。
舉個例子，就像前面JavaScript代碼里展示的邏輯：
- 頁面加載，先看localStorage里有沒有theme這個鍵。
- 有？好，直接用localStorage里的值來設置主題，這是用戶的“明確意愿”。
- 沒有？那再看prefers-color-scheme，如果系統是暗色，就設為暗色；否則設為亮色。
- 用戶點擊切換按鈕，更新localStorage，并且立刻切換主題。
- 監聽prefers-color-scheme的change事件，如果localStorage里沒有用戶設置，就根據新的系統偏好來調整。
這種策略既保證了網站的智能化，能響應系統設置，又賦予了用戶最終的控制權，讓他們可以根據自己的喜好覆蓋默認行為。這是一個非常人性化的設計，能顯著提升用戶滿意度。
