仅用 CSS 实现网站暗黑模式切换的方法

在当今的网页设计中，为用户提供暗黑模式的选择已经成为一种流行趋势。暗黑模式不仅能在低光环境下提供更舒适的视觉体验，还能节省设备电量。而且，仅使用 CSS 就可以实现这一功能，无需依赖复杂的 JavaScript 代码。

我们需要定义一个切换按钮来触发暗黑模式的切换。可以使用 HTML 的<input>元素创建一个复选框，并为其添加一些样式和事件处理。

<input type="checkbox" id="dark-mode-toggle">
<label for="dark-mode-toggle">暗黑模式</label>

接下来，通过 CSS 的媒体查询来检测用户是否选择了暗黑模式。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #fff;
  }
  h1, h2, h3, p {
    color: #fff;
  }
  /* 其他需要在暗黑模式下更改样式的元素 */
}

然后，使用 JavaScript 来监听切换按钮的状态变化，并相应地添加或移除一个特定的类名，例如dark-mode。

const toggle = document.getElementById('dark-mode-toggle');

toggle.addEventListener('change', function() {
  if (this.checked) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
});

在 CSS 中，定义.dark-mode类的样式来实现暗黑模式的具体效果。

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

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode p {
  color: #fff;
}

/* 其他需要在暗黑模式下更改样式的元素 */

通过这种方式，仅使用 CSS 和少量的 JavaScript 就可以轻松实现网站的暗黑模式切换，为用户提供更多的选择和更好的体验。

需要注意的是，在实际应用中，要确保暗黑模式下的颜色搭配和对比度符合用户的可读性和可用性要求。对于图片和图标等元素，也需要考虑它们在暗黑模式下的显示效果，以保证整个网站在不同模式下都能保持良好的视觉表现和用户体验。

仅用 CSS 实现网站暗黑模式切换是一种简洁而有效的方法，能够提升网站的功能性和用户友好度。