.jpg)
實(shí)現(xiàn)暗黑模式切換的核心方法是使用css變量和JavaScript動(dòng)態(tài)修改主題樣式。1. 定義css變量分別對(duì)應(yīng)亮色和暗色模式的顏色值；2. 通過javascript監(jiān)聽切換操作，修改根元素的dataset屬性來切換主題，并利用localstorage保存用戶選擇；3. 頁面加載時(shí)根據(jù)系統(tǒng)偏好設(shè)置默認(rèn)主題；4. 使用prefers-color-scheme媒體查詢檢測(cè)系統(tǒng)主題變化并更新頁面；5. 可選css類名切換方案，通過javascript切換類名實(shí)現(xiàn)兼容性更強(qiáng)的主題管理；6. 性能優(yōu)化方面包括使用css變量減少重排、避免復(fù)雜選擇器、使用requestanimationframe控制dom更新時(shí)機(jī)、添加過渡效果提升體驗(yàn)及使用will-change屬性提前優(yōu)化渲染。
實(shí)現(xiàn)暗黑模式切換，核心在于動(dòng)態(tài)改變CSS樣式，讓頁面元素適應(yīng)不同的主題色。這聽起來簡單，但要做好，需要考慮用戶體驗(yàn)、代碼維護(hù)性以及性能等多個(gè)方面。
解決方案
最基礎(chǔ)的方法是使用CSS變量（custom properties）和JavaScript。定義一組CSS變量，分別對(duì)應(yīng)亮色模式和暗色模式下的顏色值。然后，通過JavaScript監(jiān)聽用戶的切換操作，修改根元素的CSS變量值，從而切換主題。
// CSS :root { --bg-color: #ffffff; /* 亮色模式背景色 */ --text-color: #000000; /* 亮色模式文字顏色 */ } [data-theme="dark"] { --bg-color: #000000; /* 暗色模式背景色 */ --text-color: #ffffff; /* 暗色模式文字顏色 */ } body { background-color: var(--bg-color); color: var(--text-color); } // JavaScript const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { const currentTheme = body.dataset.theme; const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; body.dataset.theme = newTheme; localStorage.setItem('theme', newTheme); // 可選：保存用戶選擇 }); // 頁面加載時(shí)，從localStorage恢復(fù)主題 const savedTheme = localStorage.getItem('theme'); if (savedTheme) { body.dataset.theme = savedTheme; }
這種方法簡單直接，但如果你的項(xiàng)目比較復(fù)雜，或者需要更高級(jí)的功能，比如自動(dòng)檢測(cè)系統(tǒng)主題、支持多種主題等，可能需要更復(fù)雜的方案。 比如可以考慮使用一些現(xiàn)成的庫，例如prefers-color-scheme，或者自己封裝一套主題管理系統(tǒng)。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
如何實(shí)現(xiàn)自動(dòng)檢測(cè)系統(tǒng)主題？
prefers-color-scheme 是一個(gè)CSS媒體查詢，它可以檢測(cè)用戶的操作系統(tǒng)是否開啟了暗黑模式。我們可以利用這個(gè)特性，在CSS中設(shè)置默認(rèn)的主題。
:root { --bg-color: #ffffff; /* 默認(rèn)亮色模式 */ --text-color: #000000; } @media (prefers-color-scheme: dark) { :root { --bg-color: #000000; /* 系統(tǒng)暗黑模式 */ --text-color: #ffffff; } } body { background-color: var(--bg-color); color: var(--text-color); }
然后，在JavaScript中，我們可以監(jiān)聽prefers-color-scheme的變化，動(dòng)態(tài)更新主題。
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { const newTheme = event.matches ? 'dark' : 'light'; body.dataset.theme = newTheme; localStorage.setItem('theme', newTheme); });
這樣，就可以實(shí)現(xiàn)自動(dòng)檢測(cè)系統(tǒng)主題并切換的功能了。
除了CSS變量，還有其他方案嗎？
當(dāng)然有。CSS類名切換也是一種常見的方案。 我們可以定義兩套CSS類名，分別對(duì)應(yīng)亮色模式和暗色模式下的樣式。然后，通過JavaScript切換根元素的類名，從而切換主題。
.light-mode { --bg-color: #ffffff; --text-color: #000000; } .dark-mode { --bg-color: #000000; --text-color: #ffffff; } body { background-color: var(--bg-color); color: var(--text-color); }
const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { body.classList.toggle('dark-mode'); // 移除另一個(gè)類名 body.classList.toggle('light-mode'); const newTheme = body.classList.contains('dark-mode') ? 'dark' : 'light'; localStorage.setItem('theme', newTheme); }); const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { body.classList.add('dark-mode'); } else { body.classList.add('light-mode'); // 默認(rèn)設(shè)置 light-mode }
這種方案的優(yōu)點(diǎn)是兼容性更好，因?yàn)镃SS類名切換是比較基礎(chǔ)的技術(shù)。缺點(diǎn)是代碼量可能會(huì)比較大，尤其是在項(xiàng)目比較復(fù)雜的情況下。
如何優(yōu)化主題切換的性能？
主題切換的性能優(yōu)化主要集中在兩個(gè)方面：減少重繪和重排。
- 使用CSS變量： CSS變量的修改只會(huì)觸發(fā)重繪，而不會(huì)觸發(fā)重排，因此性能更好。
- 避免復(fù)雜的css選擇器： 復(fù)雜的CSS選擇器會(huì)增加瀏覽器的計(jì)算量，影響性能。
- 使用requestAnimationFrame： 在JavaScript中修改DOM時(shí)，可以使用requestAnimationFrame來優(yōu)化性能。requestAnimationFrame會(huì)在瀏覽器下一次重繪之前執(zhí)行回調(diào)函數(shù)，從而減少重繪的次數(shù)。
toggleButton.addEventListener('click', () => { requestAnimationFrame(() => { body.dataset.theme = newTheme; }); });
- 避免頻繁切換主題： 頻繁切換主題會(huì)增加瀏覽器的負(fù)擔(dān)，影響性能。可以考慮在用戶切換主題時(shí)，添加一個(gè)過渡效果，讓主題切換更加平滑。
- 使用will-change： will-change屬性可以提前告訴瀏覽器，某個(gè)元素將會(huì)發(fā)生變化，從而讓瀏覽器提前做好優(yōu)化。
body { will-change: background-color, color; transition: background-color 0.3s, color 0.3s; }
總的來說，暗黑模式切換的實(shí)現(xiàn)方案有很多種，選擇哪種方案取決于你的項(xiàng)目需求和技術(shù)棧。關(guān)鍵在于理解其原理，并根據(jù)實(shí)際情況進(jìn)行優(yōu)化。
.png)
