可以使用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和增量更新，来减少页面渲染的次数。
暂无评论内容