实现暗黑模式切换的核心方法是使用css变量和javascript动态修改主题样式。1. 定义css变量分别对应亮色和暗色模式的颜色值；2. 通过javascript监听切换操作，修改根元素的dataset属性来切换主题，并利用localstorage保存用户选择；3. 页面加载时根据系统偏好设置默认主题；4. 使用prefers-color-scheme媒体查询检测系统主题变化并更新页面；5. 可选css类名切换方案，通过javascript切换类名实现兼容性更强的主题管理；6. 性能优化方面包括使用css变量减少重排、避免复杂选择器、使用requestanimationframe控制dom更新时机、添加过渡效果提升体验及使用will-change属性提前优化渲染。
实现暗黑模式切换，核心在于动态改变CSS样式，让页面元素适应不同的主题色。这听起来简单，但要做好，需要考虑用户体验、代码维护性以及性能等多个方面。
解决方案
最基础的方法是使用CSS变量（custom properties）和JavaScript。定义一组CSS变量，分别对应亮色模式和暗色模式下的颜色值。然后，通过JavaScript监听用户的切换操作，修改根元素的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); // 可选：保存用户选择
});
// 页面加载时，从localStorage恢复主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.dataset.theme = savedTheme;
}这种方法简单直接，但如果你的项目比较复杂，或者需要更高级的功能，比如自动检测系统主题、支持多种主题等，可能需要更复杂的方案。 比如可以考虑使用一些现成的库，例如prefers-color-scheme，或者自己封装一套主题管理系统。
立即学习“前端免费学习笔记（深入）”；
如何实现自动检测系统主题？
prefers-color-scheme 是一个CSS媒体查询，它可以检测用户的操作系统是否开启了暗黑模式。我们可以利用这个特性，在CSS中设置默认的主题。
:root {
--bg-color: #ffffff; /* 默认亮色模式 */
--text-color: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000; /* 系统暗黑模式 */
--text-color: #ffffff;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}然后，在JavaScript中，我们可以监听prefers-color-scheme的变化，动态更新主题。
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
const newTheme = event.matches ? 'dark' : 'light';
body.dataset.theme = newTheme;
localStorage.setItem('theme', newTheme);
});这样，就可以实现自动检测系统主题并切换的功能了。
除了CSS变量，还有其他方案吗？
当然有。CSS类名切换也是一种常见的方案。 我们可以定义两套CSS类名，分别对应亮色模式和暗色模式下的样式。然后，通过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');
// 移除另一个类名
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'); // 默认设置 light-mode
}这种方案的优点是兼容性更好，因为CSS类名切换是比较基础的技术。缺点是代码量可能会比较大，尤其是在项目比较复杂的情况下。
如何优化主题切换的性能？
主题切换的性能优化主要集中在两个方面：减少重绘和重排。
- 使用CSS变量： CSS变量的修改只会触发重绘，而不会触发重排，因此性能更好。
- 避免复杂的CSS选择器： 复杂的CSS选择器会增加浏览器的计算量，影响性能。
-
使用
requestAnimationFrame： 在JavaScript中修改DOM时，可以使用requestAnimationFrame来优化性能。requestAnimationFrame会在浏览器下一次重绘之前执行回调函数，从而减少重绘的次数。
toggleButton.addEventListener('click', () => {
requestAnimationFrame(() => {
body.dataset.theme = newTheme;
});
});- 避免频繁切换主题： 频繁切换主题会增加浏览器的负担，影响性能。可以考虑在用户切换主题时，添加一个过渡效果，让主题切换更加平滑。
-
使用
will-change：will-change属性可以提前告诉浏览器，某个元素将会发生变化，从而让浏览器提前做好优化。
body {
will-change: background-color, color;
transition: background-color 0.3s, color 0.3s;
}总的来说，暗黑模式切换的实现方案有很多种，选择哪种方案取决于你的项目需求和技术栈。关键在于理解其原理，并根据实际情况进行优化。
