CSS 和 JavaScript 实现暗模式的方法

在当今的网页设计中，暗模式已成为一种流行的趋势，它不仅能为用户提供独特的视觉体验，还能在低光环境下减少眼睛疲劳。下面我们将探讨如何使用 CSS 和 JavaScript 来实现暗模式。

使用 CSS 实现暗模式相对较为简单。我们可以通过媒体查询（Media Query）来检测用户的系统偏好或设备设置，从而切换到暗模式的样式。以下是一个基本的示例：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #fff;
  }
  h1 {
    color: #fff;
  }
  p {
    color: #ddd;
  }
}

上述代码中，prefers-color-scheme: dark 表示当用户系统偏好为暗模式时，应用相应的样式。我们将背景色设置为深灰色，文字颜色设置为白色或浅灰色，以达到暗模式的效果。

然而，仅仅依靠 CSS 的媒体查询可能无法满足所有需求。有时我们需要通过 JavaScript 来实现更灵活的暗模式切换功能。

我们可以添加一个切换按钮，让用户手动选择是否启用暗模式。

<button id="darkModeToggle">切换暗模式</button>

然后，通过 JavaScript 来处理切换操作。

const toggleBtn = document.getElementById('darkModeToggle');
toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

接下来，在 CSS 中定义 .dark-mode 类的样式。

.dark-mode {
  background-color: #121212;
  color: #fff;
}

这样，当用户点击切换按钮时，页面就会在正常模式和暗模式之间切换。

另外，为了在用户下次访问时记住他们的选择，我们可以使用本地存储（Local Storage）来保存用户的偏好设置。

const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) {
  document.body.classList.add('dark-mode');
}

toggleBtn.addEventListener('click', () => {
  const isDark = document.body.classList.contains('dark-mode');
  localStorage.setItem('darkMode',!isDark);
  document.body.classList.toggle('dark-mode');
});

通过上述 CSS 和 JavaScript 的结合使用，我们能够为用户提供更加个性化和便捷的暗模式体验，提升网页的可用性和用户满意度。

利用 CSS 和 JavaScript 实现暗模式，既需要考虑系统的默认设置，也要提供用户自主选择的功能，以满足不同用户的需求和偏好。不断优化和改进暗模式的实现方式，将有助于提升网页的整体品质和用户体验。