js怎么加黑暗模式

在网页中添加黑暗模式的主要方法有：使用CSS变量、使用JavaScript监听用户的系统主题、提供手动切换按钮。 推荐使用CSS变量和JavaScript结合的方式，这样可以实现动态切换，并且兼容性较好。以下是具体实现步骤。

一、使用CSS变量

CSS变量可以让我们轻松地更改网页的配色方案。我们可以定义一组用于普通模式的变量和一组用于黑暗模式的变量。

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
.dark-mode {
  --background-color: #000000;
  --text-color: #ffffff;
}

二、使用JavaScript监听用户的系统主题

我们可以使用JavaScript来监听用户的系统主题设置，从而自动切换到黑暗模式或者普通模式。以下是具体实现：

const toggleDarkMode = (isDark) => {
  if (isDark) {
    document.documentElement.classList.add('dark-mode');
  } else {
    document.documentElement.classList.remove('dark-mode');
  }
};
// 检查系统主题
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
// 初始加载时应用系统主题
toggleDarkMode(prefersDarkScheme.matches);
// 监听系统主题变化
prefersDarkScheme.addEventListener('change', (event) => {
  toggleDarkMode(event.matches);
});

三、提供手动切换按钮

为了增强用户体验，我们还可以提供一个按钮，让用户手动切换黑暗模式和普通模式。

<button id="theme-toggle">Toggle Dark Mode</button>

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark-mode');
});

四、保存用户选择

为了使用户的选择在刷新页面后依然有效，我们可以使用localStorage来保存用户的选择。

const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
  if (currentTheme === 'dark') {
    document.documentElement.classList.add('dark-mode');
  }
}
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark-mode');
  let theme = 'light';
  if (document.documentElement.classList.contains('dark-mode')) {
    theme = 'dark';
  }
  localStorage.setItem('theme', theme);
});

五、使用CSS媒体查询

除了JavaScript，我们还可以使用CSS媒体查询来自动应用黑暗模式，这种方法相对简单，但不能提供手动切换功能。

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --text-color: #ffffff;
  }
}

总结

以上方法可以帮助你在网页中添加黑暗模式功能，具体实现可以根据需求进行调整。无论是通过CSS变量和JavaScript结合的方式，还是使用CSS媒体查询，都是实现黑暗模式的有效方法。通过结合不同的方法，可以为用户提供更好的体验和更多的选择。