懒人必备！三分钟搞定主题切换夜间模式

2023-12-02 09:35:50

夜间模式主题：懒人指南

在数字时代，长时间盯着屏幕会对我们的眼睛造成极大的压力，导致疲劳、干涩和疼痛。为了缓解这些问题，夜间模式应运而生，它可以调整屏幕亮度和色温，为我们的眼睛提供更舒适的观看体验。

实现夜间模式的懒人方法

步骤 1：添加 CSS 类

在你的 CSS 文件中，添加一个名为 "night-mode" 的 CSS 类，并设置以下样式：

.night-mode {
  background-color: #000;
  color: #fff;
}

这将创建一个具有黑色背景和白色文本的夜间模式主题。

步骤 2：添加按钮或切换器

你需要添加一个按钮或切换器，用户可以点击它来切换到夜间模式。你可以将按钮或切换器放置在你的导航栏或页面其他合适的位置。

步骤 3：添加事件监听器

当用户点击按钮或切换器时，你需要添加一个事件监听器来切换 "night-mode" CSS 类。你可以使用以下 JavaScript 代码：

const nightModeButton = document.getElementById("night-mode-button");

nightModeButton.addEventListener("click", () => {
  document.body.classList.toggle("night-mode");
});

这将切换 "night-mode" CSS 类，从而在白天模式和夜间模式之间切换。

示例代码

以下是一个完整的示例代码，展示了如何实现主题切换夜间模式：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #fff;
      color: #000;
    }

    .night-mode {
      background-color: #000;
      color: #fff;
    }
  </style>
</head>
<body>
  <h1>夜间模式主题切换</h1>

  <button id="night-mode-button">切换夜间模式</button>

  <script>
    const nightModeButton = document.getElementById("night-mode-button");

    nightModeButton.addEventListener("click", () => {
      document.body.classList.toggle("night-mode");
    });
  </script>
</body>
</html>