互联网行业从业者，很多人喜欢在深夜工作。对于这些夜猫子来说，明亮的屏幕光线可能会让他们的眼睛感到疲劳和不适。为此，很多网站也做了夜间浏览模式，也被称为黑暗模式，它可以通过反转网站的配色方案，将背景设置为深色，文本和图像设置为浅色，从而减少屏幕发出的蓝光，缓解眼睛疲劳，让用户在黑暗环境中也能感到舒适。

如果你也想为你的网站或网页添加黑暗模式功能，可以参考以下三种方法：

1. 使用CSS媒体查询

CSS媒体查询是一种允许你根据不同的媒体类型和设备来定义不同的样式规则的机制。你可以使用媒体查询来检测用户的操作系统或浏览器是否支持黑暗模式，并根据检测结果自动切换不同的样式表。

例如，你可以使用以下CSS媒体查询来检测用户是否正在使用深色模式：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

这段代码的意思是，如果用户正在使用深色模式，那么将把body元素的背景色设置为黑色，文本颜色设置为白色。

2. 使用JS判断

你也可以使用JavaScript来判断用户的操作系统或浏览器是否支持黑暗模式。例如，你可以使用以下JavaScript代码来检测用户是否正在使用深色模式：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // 用户正在使用深色模式
} else {
  // 用户正在使用浅色模式
}

这段代码的意思是，如果用户的浏览器支持媒体查询，并且用户正在使用深色模式，那么就会执行if语句中的代码。否则，就会执行else语句中的代码。

3. 使用第三方插件

如果你不想自己编写代码，也可以使用第三方插件来实现网站黑暗模式。有很多第三方插件都可以帮助你轻松地为你的网站或网页添加黑暗模式功能。例如，你可以使用以下插件：

• Dark Reader
• Night Eye
• Dark Mode

这些插件都非常易于使用，你只需按照插件的说明进行操作即可。

结语

以上三种方法都可以帮助你轻松地为你的网站或网页添加黑暗模式功能。无论你是网站开发人员还是普通用户，都可以根据自己的需要选择合适的方法来实现。希望本文对你有帮助！