可以使用css变量和prefers-color-scheme实现暗黑模式切换，1. 定义两套css变量分别用于亮色和暗黑模式，并通过媒体查询应用；2. 使用javascript通过类名手动切换主题；3. 利用localstorage持久化用户选择；4. 通过css filter或双套图片资源处理图片在暗黑模式下的显示；5. 覆盖第三方库样式或使用其主题配置适配暗黑模式；6. 避免页面闪烁可通过使用css变量、添加transition过渡、避免复杂计算和预加载资源实现，整个方案确保主题切换平滑且可维护，以完整句⼦结束。
使用CSS变量和
prefers-color-scheme
媒体查询，可以轻松实现暗黑模式切换。核心在于定义两套CSS变量，一套用于亮色模式，另一套用于暗黑模式，然后通过媒体查询根据用户的系统设置应用相应的变量。
解决方案：
- 定义CSS变量： 在
:root
伪类中定义亮色模式下的CSS变量，然后在
@media (prefers-color-scheme: dark)
中覆盖这些变量，定义暗黑模式下的值。
:root { --bg-color: #fff; --text-color: #000; --link-color: blue; } @media (prefers-color-scheme: dark) { :root { --bg-color: #333; --text-color: #eee; --link-color: lightblue; } } body { background-color: var(--bg-color); color: var(--text-color); } a { color: var(--link-color); }
- 手动切换： 如果需要手动切换暗黑模式，可以使用JavaScript来切换一个类名，例如
dark-mode
，然后根据这个类名来覆盖CSS变量。
<button id="theme-toggle">切换主题</button> <script> const themeToggle = document.getElementById('theme-toggle'); themeToggle.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); }); </script>
:root { --bg-color: #fff; --text-color: #000; --link-color: blue; } body.dark-mode { --bg-color: #333; --text-color: #eee; --link-color: lightblue; } body { background-color: var(--bg-color); color: var(--text-color); } a { color: var(--link-color); } @media (prefers-color-scheme: dark) { /* 默认暗黑模式，但会被手动切换覆盖 */ }
- 持久化存储： 为了记住用户的选择，可以使用
localStorage
来存储用户的偏好。
const themeToggle = document.getElementById('theme-toggle'); const body = document.body; const darkModeClass = 'dark-mode'; // 从 localStorage 加载主题 const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { body.classList.add(darkModeClass); } themeToggle.addEventListener('click', () => { body.classList.toggle(darkModeClass); // 保存主题到 localStorage if (body.classList.contains(darkModeClass)) { localStorage.setItem('theme', 'dark'); } else { localStorage.setItem('theme', 'light'); } });
CSS变量的优势在于易于维护和修改，只需要修改变量的值就可以改变整个网站的颜色方案。
立即学习“前端免费学习笔记（深入）”；
如何处理图片资源在暗黑模式下的显示？
可以利用CSS的
filter
属性，例如
invert
和
brightness
，来调整图片的颜色。或者，可以提供两套图片资源，通过CSS媒体查询来切换。
img { filter: invert(0); /* 默认不反转 */ } @media (prefers-color-scheme: dark) { img { filter: invert(1); /* 暗黑模式下反转 */ } } /* 或者 */ .logo { content: url("logo-light.png"); } @media (prefers-color-scheme: dark) { .logo { content: url("logo-dark.png"); } }
更复杂的情况，可能需要使用JavaScript来动态切换图片资源，尤其是当图片需要更精细的调整时。
如何处理第三方库的样式？
有些第三方库可能没有提供暗黑模式的支持，这时需要手动覆盖它们的样式。可以使用CSS选择器来覆盖特定的样式规则，或者使用CSS变量来统一管理颜色。如果第三方库提供了自定义主题的选项，可以尝试使用这些选项来适配暗黑模式。例如，某些UI库允许你传入自定义的CSS变量。如果实在不行，可能需要考虑更换一个支持暗黑模式的库，或者自己实现相应的功能。
暗黑模式切换时，如何避免页面闪烁？
页面闪烁通常发生在主题切换时，浏览器需要重新渲染页面。为了避免这种情况，可以采取以下措施：
- 使用CSS变量： CSS变量的切换通常比直接修改CSS属性更平滑，因为浏览器可以更快地更新变量的值。
- 避免复杂的CSS计算： 复杂的CSS计算可能会导致浏览器渲染缓慢，尽量避免在主题切换时触发这些计算。
- 使用
transition
属性：
可以为CSS变量的切换添加过渡效果，使主题切换更加平滑。例如：
body { transition: background-color 0.3s, color 0.3s; }
- 预加载资源： 提前加载暗黑模式下的图片和其他资源，可以减少切换时的延迟。可以使用
<link rel="preload">
来预加载资源。
除了这些方法，还可以使用一些JavaScript库来优化主题切换的性能。这些库通常会使用一些高级技术，例如虚拟DOM和增量更新，来减少页面渲染的次数。
评论（已关闭）
评论已关闭