当前位置：首页 > 文章列表 > 文章 > 前端 > HTML如何用JS一键开启暗黑模式？CSS变量+本地存储超简单

HTML如何用JS一键开启暗黑模式？CSS变量+本地存储超简单

2025-06-20 11:56:16 0浏览收藏

想要为你的网站或应用轻松实现暗黑模式吗？本文将为你揭秘如何利用HTML、CSS和JS，通过CSS变量和本地存储，打造一个用户友好的暗黑模式切换功能。文章深入浅出地讲解了如何定义CSS变量，区分亮色和暗色模式下的颜色值，并利用JS切换类名激活不同的变量集，同时使用localStorage记住用户的偏好设置。此外，还探讨了图片资源的暗黑模式适配方案，包括使用CSS filter属性、srcset属性结合媒体查询以及JS动态替换图片源等方法。更进一步地，文章还分享了优化暗黑模式JS代码的技巧，如减少DOM操作、使用requestAnimationFrame、事件委托以及添加CSS过渡效果，旨在提升性能并增强用户体验。

实现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）加载不同的图片资源。
```
<img src="light-mode-image.png"
     srcset="dark-mode-image.png (prefers-color-scheme: dark)"
     alt="Image">
```

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;
}
```