實現html暗黑模式的核心在于利用css變量動態改變樣式，并通過JS切換變量和本地存儲記住用戶選擇。1.定義css變量，使用–前綴分別設定亮色與暗色模式下的顏色值；2.通過js切換類名激活不同變量集，并用localstorage保存用戶偏好；3.圖片適配可使用Filter屬性反轉顏色、srcset根據媒體查詢加載不同資源或js動態替換圖片源；4.還需關注對比度、語義化顏色命名、交互狀態反饋、第三方庫兼容性及多設備測試；5.優化方面包括減少dom操作、使用requestanimationframe、事件委托及添加css過渡效果，以提升性能并增強體驗。
實現HTML暗黑模式，核心在于利用CSS變量動態改變樣式，并通過JS來切換這些變量，同時用本地存儲記住用戶的選擇。簡單來說，就是一套“變色龍”機制，加上一個“記憶”功能。
解決方案
-
定義CSS變量： 在CSS中，使用–前綴定義變量，用于存儲亮暗模式下的顏色值。
:root { --bg-color: #ffffff; /* 亮色背景 */ --text-color: #000000; /* 亮色文字 */ } body { background-color: var(--bg-color); color: var(--text-color); } .dark-mode { --bg-color: #333333; /* 暗色背景 */ --text-color: #ffffff; /* 暗色文字 */ } -
JS切換CSS變量： 使用JS來切換body或其他元素的類名，從而激活不同的CSS變量集。
立即學習“前端免費學習筆記（深入）”；
const body = document.body; const darkModeToggle = document.getElementById('dark-mode-toggle'); // 假設有這樣一個按鈕 darkModeToggle.addEventListener('click', () => { body.classList.toggle('dark-mode'); // 保存用戶選擇到本地存儲 localStorage.setItem('darkMode', body.classList.contains('dark-mode')); }); // 頁面加載時，檢查本地存儲，應用用戶之前的選擇 if (localStorage.getItem('darkMode') === 'true') { body.classList.add('dark-mode'); } -
本地存儲： 利用localStorage記住用戶的選擇，下次打開頁面時自動應用。
如何處理圖片資源的暗黑模式適配？
這是一個比較麻煩但很重要的問題。僅僅改變顏色是不夠的，有些圖片在暗黑模式下可能需要替換，或者進行顏色反轉。
-
CSS filter屬性： 可以嘗試使用filter: invert(1)來反轉圖片的顏色，但效果可能不理想，特別是對于復雜的圖片。
.dark-mode img { filter: invert(1); /* 可能會導致顏色失真 */ } -
媒體查詢結合srcset： 使用srcset屬性，根據媒體查詢（例如prefers-color-scheme: dark）加載不同的圖片資源。
@@##@@
-
JS動態替換圖片： 使用JS監聽暗黑模式的切換，并動態替換img標簽的src屬性。這種方法比較靈活，但需要維護兩套圖片資源。
const images = document.querySelectorAll('img[data-dark-src]'); function updateImages() { images.forEach(img => { const darkSrc = img.dataset.darkSrc; const lightSrc = img.src; if (body.classList.contains('dark-mode')) { img.src = darkSrc; } else { img.src = lightSrc; } }); } darkModeToggle.addEventListener('click', updateImages); updateImages(); // 初始加載時執行這種方法需要在HTML中為圖片添加data-dark-src屬性，指向暗黑模式下的圖片資源。
除了顏色和圖片，還有哪些方面需要考慮暗黑模式適配？
暗黑模式不僅僅是顏色反轉，還涉及到對比度、可讀性等多個方面。
-
對比度： 確保暗黑模式下文本和背景之間的對比度足夠高，避免用戶閱讀困難。可以使用在線工具來檢查對比度是否符合WCAG標準。
-
語義化顏色： 使用語義化的CSS變量名稱，例如–primary-color、–secondary-color，而不是具體的顏色值。這樣更容易維護和修改。
-
狀態反饋： 確保按鈕、鏈接等交互元素在暗黑模式下有清晰的狀態反饋，例如hover、active狀態。
-
第三方庫： 如果使用了第三方ui庫，需要檢查它們是否支持暗黑模式，并進行相應的配置。
-
用戶體驗： 在不同的設備和瀏覽器上測試暗黑模式的效果，確保用戶體驗一致。
如何優化暗黑模式的JS代碼，避免性能問題？
頻繁操作DOM可能會導致性能問題，特別是在大型項目中。
-
減少DOM操作： 盡量避免在循環中操作DOM?？梢詫⑿枰薷牡脑鼐彺嫫饋?，一次性修改。
-
使用requestAnimationFrame： 將DOM操作放在requestAnimationFrame回調函數中執行，可以避免頁面卡頓。
darkModeToggle.addEventListener('click', () => { requestAnimationFrame(() => { body.classList.toggle('dark-mode'); localStorage.setItem('darkMode', body.classList.contains('dark-mode')); }); }); -
事件委托： 如果有很多元素需要監聽事件，可以使用事件委托，將事件監聽器添加到父元素上。
-
避免過度優化： 不要為了優化而犧牲代碼的可讀性和可維護性。在性能瓶頸出現時再進行優化。
-
使用CSS transition： 為顏色切換添加過渡效果，可以使暗黑模式的切換更加平滑。
body { transition: background-color 0.3s, color 0.3s; }
暗黑模式的實現是一個細節活，需要考慮各種情況，才能給用戶帶來最佳的體驗。
