实现暗黑模式切换的核心方法是使用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; }
总的来说，暗黑模式切换的实现方案有很多种，选择哪种方案取决于你的项目需求和技术栈。关键在于理解其原理，并根据实际情况进行优化。
