如何为网站添加深色模式？

许多人喜欢为网站选择深色模式，也许他们更喜欢这种UI，或者他们想让眼睛免受疲劳。这篇文章将向你展示如何实现自动css深色模式，该模式根据访问者的主题而变化。

在此站点上，我定义了变量以设置主题的颜色，我配置的标准变量如下：

变量使用方法：

这样，如果你想更改主题颜色，则只需修改定义的变量，所有使用该变量的内容都会更新。

现在我们需要定义一组新的变量，这些变量将在调用css深色模式时使用。对我来说，其他变量定义如下所示：

现在，我们定义了两组变量，剩下要做的就是将 prefers-color-scheme 媒体查询添加到我们的深色变量中。

带上深色变量并在 @media 下面添加查询：

如果有人使用深色 *** 作系统主题并访问你的网站，你的网站将自动切换到深色模式

切换前

切换后

如果你想要测试效果，可以修改自己 *** 作系统的主题模式

现在，如果你有一个网站，不仅应该支持响应式，而且在主题方面也具有响应能力。我敢肯定，你的深夜访客或那些只喜欢深色主题网站的访客一定会感谢你。

原文地址（英文）： https://kevq.uk/how-to-add-css-dark-mode-to-a-website/

1、先修改显示属性外观：鼠标对着桌面空白处按右键/属性/外观/高级/点击“项目”的下拉菜单找到并点击“窗口”选项/点击“颜色1（L）”的下拉菜单，出现颜色的选项后你先黑色后点“确定”--“应用”--“确定”。经此设置后，你打开“我的电脑”就是黑色显示了，但浏览网页还是白色的，需再设置浏览器。

2、打开IE浏览器/工具/IE选项/选项辅助功能/把“忽略网页上指定的颜色”前面的勾打上/确定。经此设置后，用IE浏览器打开网页就是黑色的了。由于我没有用过360浏览器，所以不知道360浏览器是否跟随IE浏览器一样打开网页就成黑色的了。我用搜狗浏览器的兼容模式浏览，就跟随IE浏览器的颜色的，你试一下吧。

提醒一下，你用黑色看网页，有些网页内容是无法显示出来的。

您可以按照以下步骤将Windows 10电脑网页设置成黑底白字：

打开Chrome浏览器或其他浏览器，进入任何一个网页。

点击浏览器右上方的菜单图标（三个竖着的点），在下拉菜单中选择“设置”选项。

在设置页面中，向下滚动找到“外观”部分。您可以在此处更改许多不同的浏览器显示选项，如主题、字体大小等。

将“主题”选项更改为“深色”。这会将浏览器的背景设置为黑色并将文本颜色更改为白色。

关闭设置窗口即可看到您的网页已经变成了黑底白字的样式。

如果您想要将整个Windows 10系统的主题设置为黑色，可以按照以下步骤进行 *** 作：

点击Windows 10系统任务栏上方的“设置”图标。

进入“个性化”选项卡，然后点击左侧菜单中的“颜色”。

在选择颜色部分，将“选择你的默认 Windows 模式”选项更改为“深色”。

关闭设置窗口后，您的Windows 10系统界面就会变成黑底白字的样式。

请注意，某些应用程序可能不支持深色主题，因此在这些应用程序中仍然会看到白底黑字的样式。

---