HTML怎么用JS实现暗黑模式？CSS变量与本地存储切换-html教程-PHP中文网

HTML怎么用JS实现暗黑模式？CSS变量与本地存储切换

看不見的法師

发布： 2025-06-19 15:33:01

原创

250人浏览过

实现html暗黑模式的核心在于利用css变量动态改变样式，并通过js切换变量和本地存储记住用户选择。1.定义css变量，使用--前缀分别设定亮色与暗色模式下的颜色值；2.通过js切换类名激活不同变量集，并用localstorage保存用户偏好；3.图片适配可使用filter属性反转颜色、srcset根据媒体查询加载不同资源或js动态替换图片源；4.还需关注对比度、语义化颜色命名、交互状态反馈、第三方库兼容性及多设备测试；5.优化方面包括减少dom操作、使用requestanimationframe、事件委托及添加css过渡效果，以提升性能并增强体验。

HTML怎么用JS实现暗黑模式？CSS变量与本地存储切换

实现HTML暗黑模式，核心在于利用CSS变量动态改变样式，并通过JS来切换这些变量，同时用本地存储记住用户的选择。简单来说，就是一套“变色龙”机制，加上一个“记忆”功能。

解决方案

定义CSS变量： 在CSS中，使用--前缀定义变量，用于存储亮暗模式下的颜色值。

:root {
  --bg-color: #ffffff; /* 亮色背景 */
  --text-color: #000000; /* 亮色文字 */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.dark-mode {
  --bg-color: #333333; /* 暗色背景 */
  --text-color: #ffffff; /* 暗色文字 */
}

登录后复制

JS切换CSS变量： 使用JS来切换body或其他元素的类名，从而激活不同的CSS变量集。

立即学习“前端免费学习笔记（深入）”；

const body = document.body;
const darkModeToggle = document.getElementById('dark-mode-toggle'); // 假设有这样一个按钮

darkModeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  // 保存用户选择到本地存储
  localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
});

// 页面加载时，检查本地存储，应用用户之前的选择
if (localStorage.getItem('darkMode') === 'true') {
  body.classList.add('dark-mode');
}

登录后复制

本地存储： 利用localStorage记住用户的选择，下次打开页面时自动应用。

如何处理图片资源的暗黑模式适配？

这是一个比较麻烦但很重要的问题。仅仅改变颜色是不够的，有些图片在暗黑模式下可能需要替换，或者进行颜色反转。

CSS filter属性： 可以尝试使用filter: invert(1)来反转图片的颜色，但效果可能不理想，特别是对于复杂的图片。
```
.dark-mode img {
  filter: invert(1); /* 可能会导致颜色失真 */
}
```
登录后复制
媒体查询结合srcset： 使用srcset属性，根据媒体查询（例如prefers-color-scheme: dark）加载不同的图片资源。
```
@@##@@
```
登录后复制

JS动态替换图片： 使用JS监听暗黑模式的切换，并动态替换img标签的src属性。这种方法比较灵活，但需要维护两套图片资源。

const images = document.querySelectorAll('img[data-dark-src]');

function updateImages() {
  images.forEach(img => {
    const darkSrc = img.dataset.darkSrc;
    const lightSrc = img.src;

    if (body.classList.contains('dark-mode')) {
      img.src = darkSrc;
    } else {
      img.src = lightSrc;
    }
  });
}

darkModeToggle.addEventListener('click', updateImages);
updateImages(); // 初始加载时执行

登录后复制

这种方法需要在HTML中为图片添加data-dark-src属性，指向暗黑模式下的图片资源。

除了颜色和图片，还有哪些方面需要考虑暗黑模式适配？

暗黑模式不仅仅是颜色反转，还涉及到对比度、可读性等多个方面。

对比度： 确保暗黑模式下文本和背景之间的对比度足够高，避免用户阅读困难。可以使用在线工具来检查对比度是否符合WCAG标准。
语义化颜色： 使用语义化的CSS变量名称，例如--primary-color、--secondary-color，而不是具体的颜色值。这样更容易维护和修改。
状态反馈： 确保按钮、链接等交互元素在暗黑模式下有清晰的状态反馈，例如hover、active状态。
第三方库： 如果使用了第三方UI库，需要检查它们是否支持暗黑模式，并进行相应的配置。
用户体验： 在不同的设备和浏览器上测试暗黑模式的效果，确保用户体验一致。

如何优化暗黑模式的JS代码，避免性能问题？

频繁操作DOM可能会导致性能问题，特别是在大型项目中。

减少DOM操作： 尽量避免在循环中操作DOM。可以将需要修改的元素缓存起来，一次性修改。

使用requestAnimationFrame： 将DOM操作放在requestAnimationFrame回调函数中执行，可以避免页面卡顿。

darkModeToggle.addEventListener('click', () => {
  requestAnimationFrame(() => {
    body.classList.toggle('dark-mode');
    localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
  });
});

登录后复制

事件委托： 如果有很多元素需要监听事件，可以使用事件委托，将事件监听器添加到父元素上。
避免过度优化： 不要为了优化而牺牲代码的可读性和可维护性。在性能瓶颈出现时再进行优化。
使用CSS transition： 为颜色切换添加过渡效果，可以使暗黑模式的切换更加平滑。
```
body {
  transition: background-color 0.3s, color 0.3s;
}
```
登录后复制