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

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

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

35

查看详情
语义化颜色： 使用语义化的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; }
```
登录后复制

暗黑模式的实现是一个细节活，需要考虑各种情况，才能给用户带来最佳的体验。

以上就是HTML怎么用JS实现暗黑模式？CSS变量与本地存储切换的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

HTML5网页如何实现响应式布局 HTML5网页适配不同屏幕尺寸的技巧 Django模板：实现HTML标签安全白名单与XSS防护优化Tailwind CSS状态样式：探索Master CSS的分组与抽象方案使用Flexbox实现响应式左右对齐按钮布局优化 CSS 状态样式：Master CSS 的分组与抽象实践