返回

仅需几行代码，为你的网站添加深夜模式

前端

夜幕降临，当我们结束了一天的工作或学习，回到家中打开电脑，准备继续处理一些事情时，屏幕上的刺眼白光往往会让人感到不适。为了避免这种情况，我们可以为网站添加一个黑暗模式，让用户在夜晚浏览时更加舒适。

什么是黑暗模式？

黑暗模式是一种网站或应用程序的配色方案，它使用深色背景和浅色文本，与传统的白色背景和黑色文本形成鲜明对比。黑暗模式的目的是减少屏幕的眩光，从而在昏暗的环境中提供更舒适的阅读体验。

为什么使用黑暗模式？

使用黑暗模式有很多好处，包括：

  • 减少眼睛疲劳：黑暗模式可以减少屏幕的眩光，从而减轻眼睛的疲劳。这对于长时间使用电脑的人来说尤其重要。
  • 改善睡眠质量：黑暗模式可以帮助改善睡眠质量。研究表明，在睡前使用黑暗模式可以减少蓝光暴露，从而促进褪黑激素的分泌，帮助人们更快入睡并获得更好的睡眠质量。
  • 提高电池寿命：黑暗模式可以帮助延长电池寿命。对于笔记本电脑和平板电脑等移动设备来说，这一点尤其重要。

如何为你的网站添加黑暗模式？

为你的网站添加黑暗模式非常简单，只需要几行代码即可。

首先，你需要在你的网站中添加一个样式表。样式表是一个包含 CSS 代码的文件，它可以用来控制网站的外观。你可以在你的网站的根目录中创建一个名为 "style.css" 的文件，然后将以下代码粘贴到其中：

body {
  background-color: #000;
  color: #fff;
}

a {
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff;
}

p {
  color: #fff;
}

这将把你的网站的背景颜色设置为黑色，文本颜色设置为白色。你还可以根据自己的喜好调整其他元素的颜色。

接下来，你需要在你的网站中添加一个 JavaScript 文件。JavaScript 是一种脚本语言，它可以用来控制网站的行为。你可以在你的网站的根目录中创建一个名为 "script.js" 的文件，然后将以下代码粘贴到其中：

document.addEventListener("DOMContentLoaded", function() {
  const body = document.querySelector("body");

  const button = document.createElement("button");
  button.textContent = "切换模式";

  button.addEventListener("click", function() {
    body.classList.toggle("dark-mode");
  });

  body.appendChild(button);
});

这将创建一个按钮，当用户点击按钮时，它将切换网站的模式。

最后，你需要将这两个文件链接到你的网站中。你可以在你的网站的 <head> 标签中添加以下代码：

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

这样，你的网站就会具有黑暗模式了。

结论

黑暗模式是一种简单而有效的方式，可以为你的网站添加额外的功能。它可以减少眼睛疲劳、改善睡眠质量并延长电池寿命。如果你想为你的网站添加黑暗模式，那么现在就可以开始行动了。