js如何实现夜间模式切换深色模式的5种实现方法分享！-js教程-PHP中文网

js如何实现夜间模式切换深色模式的5种实现方法分享！

尼克

发布： 2025-06-30 18:55:01

原创

589人浏览过

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

js如何实现夜间模式切换深色模式的5种实现方法分享！

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

解决方案：

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 样式，如果项目较大，维护成本会增加。

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 变量，兼容性不如第一种方法。
prefers-color-scheme 媒体查询： 监听用户的系统主题设置，自动切换主题。无需 JS 代码，完全依赖 CSS。
```
body {
  background-color: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}
```
登录后复制
优点：无需 JS 代码，自动适应用户系统主题。缺点：无法手动切换主题，依赖用户系统设置。
CSS Filters： 使用 CSS filter 属性反转颜色。这种方法简单粗暴，但效果可能不佳，尤其是在处理图片时。
```
.dark-mode {
  filter: invert(100%);
}
```
登录后复制
优点：实现简单，代码量少。缺点：效果差，可能影响图片显示，不推荐使用。

动态修改 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 文件加载，对图片进行压缩，使用懒加载技术等。此外，还可以使用浏览器缓存，减少重复加载。

以上就是js如何实现夜间模式切换深色模式的5种实现方法分享！的详细内容，更多请关注php中文网其它相关文章！