5种JS夜间模式切换方法分享！

本篇文章给大家分享《JS实现夜间模式切换的5种方法分享！》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

实现夜间模式的方法有五种，各有优劣。1. CSS 类名切换：通过切换类名应用不同样式，简单易懂但维护成本高；2. CSS 变量：使用变量统一管理样式，易于维护但兼容性较差；3. prefers-color-scheme 媒体查询：自动适配系统主题，但无法手动切换；4. CSS Filters：通过滤镜反转颜色，实现简单但效果差；5. 动态加载 CSS 文件：切换不同样式文件，结构清晰但可能影响性能。设计深色模式应遵循可读性、对比度和品牌一致性原则，避免纯黑背景并优化图片视频显示。处理媒体内容可通过提供双套资源或智能调整颜色方案。性能方面，合理选择实现方式并结合 CDN、压缩、缓存等技术可减少影响。

切换夜间模式，本质上就是在不同主题之间切换。JS 实现夜间模式，核心在于动态修改样式。这里分享五种实现深色模式的方法，各有优劣，可以根据项目情况选择。

解决方案：

1. CSS 类名切换： 这是最常见也最简单的方法。定义两套 CSS 样式，一套用于白天模式，一套用于夜间模式。通过 JS 切换 body 或特定容器的 class 来实现主题切换。

   

   const body = document.body;
   const toggleButton = document.getElementById('toggle-button');
   
   toggleButton.addEventListener('click', () => {
     body.classList.toggle('dark-mode');
     // 可选：将当前模式保存到 localStorage
     localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');
   });
   
   // 页面加载时检查 localStorage
   if (localStorage.getItem('theme') === 'dark') {
     body.classList.add('dark-mode');
   }

   优点：简单易懂，兼容性好。缺点：需要维护两套 CSS 样式，如果项目较大，维护成本会增加。

2. CSS 变量 (Custom Properties)： 使用 CSS 变量定义颜色、字体等样式，通过 JS 修改 CSS 变量的值来实现主题切换。

   :root {
     --bg-color: #fff;
     --text-color: #000;
   }
   
   body {
     background-color: var(--bg-color);
     color: var(--text-color);
   }
   
   .dark-mode {
     --bg-color: #000;
     --text-color: #fff;
   }

   JS 代码与第一种方法类似，切换 dark-mode 类名即可。

   优点：方便统一管理样式，易于维护。缺点：需要浏览器支持 CSS 变量，兼容性不如第一种方法。

3. prefers-color-scheme 媒体查询： 监听用户的系统主题设置，自动切换主题。无需 JS 代码，完全依赖 CSS。

   body {
     background-color: #fff;
     color: #000;
   }
   
   @media (prefers-color-scheme: dark) {
     body {
       background-color: #000;
       color: #fff;
     }
   }

   优点：无需 JS 代码，自动适应用户系统主题。缺点：无法手动切换主题，依赖用户系统设置。

4. CSS Filters： 使用 CSS filter 属性反转颜色。这种方法简单粗暴，但效果可能不佳，尤其是在处理图片时。

   .dark-mode {
     filter: invert(100%);
   }

   优点：实现简单，代码量少。缺点：效果差，可能影响图片显示，不推荐使用。

5. 动态修改 CSS 文件： 加载不同的 CSS 文件来实现主题切换。

   const toggleButton = document.getElementById('toggle-button');
   const link = document.getElementById('theme-link'); // 假设有一个 id 为 theme-link 的 link 标签
   
   toggleButton.addEventListener('click', () => {
     const currentTheme = link.getAttribute('href');
     const newTheme = currentTheme === 'light.css' ? 'dark.css' : 'light.css';
     link.setAttribute('href', newTheme);
     localStorage.setItem('theme', newTheme.replace('.css', ''));
   });
   
   if (localStorage.getItem('theme') === 'dark') {
     link.setAttribute('href', 'dark.css');
   } else {
     link.setAttribute('href', 'light.css');
   }

   优点：结构清晰，不同主题的样式完全隔离。缺点：需要加载不同的 CSS 文件，可能会影响性能。

深色模式有哪些设计原则需要遵循？

深色模式并非简单地将颜色反转，需要考虑可读性、易用性和视觉舒适度。例如，避免使用纯黑色背景，而是使用深灰色，以减少眼睛疲劳。文本颜色也应该选择易于阅读的浅色，并调整对比度，确保信息清晰可见。此外，对于图片和视频等内容，可能需要进行特殊处理，以保证在深色模式下的显示效果。在设计深色模式时，还要考虑品牌一致性，确保深色模式与品牌的整体风格保持一致。

如何处理深色模式下的图片和视频？

处理深色模式下的图片和视频是一个挑战。对于矢量图片，可以考虑使用 CSS 滤镜或 JavaScript 动态调整颜色。对于位图图片，可以提供两套图片，一套用于白天模式，一套用于夜间模式。对于视频，可能需要调整亮度、对比度等参数，或者提供专门的深色模式版本。一个更高级的方法是使用人工智能技术，自动识别图片和视频中的颜色，并进行智能调整，以适应深色模式。

深色模式对网站性能有什么影响？

深色模式对网站性能的影响取决于具体的实现方式。如果使用 CSS 类名切换或 CSS 变量，对性能的影响较小。如果需要加载不同的 CSS 文件或处理大量的图片和视频，可能会影响性能。因此，在实现深色模式时，需要考虑性能优化，例如使用 CDN 加速 CSS 文件加载，对图片进行压缩，使用懒加载技术等。此外，还可以使用浏览器缓存，减少重复加载。

终于介绍完啦！小伙伴们，这篇关于《5种JS夜间模式切换方法分享！》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！