返回

网页夜间模式：用 CSS 轻松打造护眼利器

前端

夜间模式：使用 CSS 轻松实现，保护双眼有妙招！

随着深夜办公一族不断壮大，夜间模式已成为许多网站和应用程序的标配。它通过将明亮的白色背景转换为深色调，在暗光环境下显著降低眼睛疲劳。本文将引导您使用 CSS 轻松实现网页夜间模式，让您的眼睛远离疲惫伤害。

CSS 实现夜间模式的步骤

  1. 创建 CSS 文件： 在您的 HTML 文档中，创建并链接一个外部 CSS 文件（例如 night-mode.css）。

  2. 添加基础样式： 在 CSS 文件中，添加以下基础样式：

body {
  background-color: #212121;
  color: #ffffff;
}
  1. 修改文本颜色： 要更改文本颜色，请添加以下样式：
p, h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
}
  1. 修改链接颜色： 要更改链接颜色，请添加以下样式：
a {
  color: #0099ff;
}
  1. 切换主题按钮： （可选）如果您希望用户能够在白天和夜间模式之间切换，请添加一个按钮，如下所示：
<button id="toggle-theme">切换主题</button>

#toggle-theme {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  border: none;
  background-color: #0099ff;
  color: #ffffff;
  cursor: pointer;
}

#toggle-theme:hover {
  background-color: #0073e6;
}
  1. 切换模式的 JavaScript 代码： 最后，添加以下 JavaScript 代码来响应按钮点击并切换主题：
const toggleThemeButton = document.getElementById("toggle-theme");

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

示例代码

以下是一个完整的示例代码，展示了如何使用 CSS 和 JavaScript 实现夜间模式：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="night-mode.css">
</head>
<body>
  <h1>这是标题</h1>
  <p>这是段落内容。</p>
  <a href="#">这是一个链接</a>

  <button id="toggle-theme">切换主题</button>

  <script>
    const toggleThemeButton = document.getElementById("toggle-theme");

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

结语

通过使用本文介绍的简单步骤，您可以轻松地在您的网页中实现夜间模式。这不仅有助于保护您的眼睛免受夜间浏览的疲劳，还可以为您的用户提供更舒适的体验。