了。近日，微信被苹果逼迫开发深色模式。越来越多的网站和应用开始支持深色模式。许多人也喜欢为网站选择深色模式，也许他们更喜欢这种外观，或者他们可能想避免眼睛疲劳。这篇文章将向您展示如何实现自动CSS深色模式，该模式会根据访问者的主题而变化。我使用CSS变量和@media查询在我的博客页面MyShop页面上实现暗模式。CSSDarkMode我定义了变量来设置主题的颜色，我建议你也这样做，因为它会让这个过程更容易。我的默认模式颜色变量如下::root{--accent:#226997;--主要：#333；--光：#666；--打火机：#f3f3f3；--边框：#e6e6e6；--bg:#ffffff;}如果你想在你的样式表中使用这些变量，你可以这样做:p{color:var(--main);}这样，如果你想改变主题的颜色，您只需要修改定义变量，所有使用该变量的内容都会被更新。现在我们需要定义一组新的变量，这些变量将在调用CSS深色模式时使用。/*定义深色模式的颜色*/:root{--accent:#3493d1;--主要：#f3f3f3；--light:#ececec;--打火机：#666；--边框：#e6e6e6；--bg:#333333;}添加深色风格支持现在我们已经定义了两组变量，唯一剩下要做的就是将preferences-color-scheme媒体查询添加到我们的深色变量中。使用Dark颜色变量并在下面添加@media查询：/*定义暗模式的颜色*/@media(prefers-color-scheme:dark){:root{--accent:#3493d1;--main:#f3f3f3;--light:#ececec;--打火机：#666；--边框：#e6e6e6；--背景音乐：#333333；}}就是这样！如果有人使用深色操作系统主题并访问您的网站，您的网站现在将自动切换到深色模式。而我的小代码页支持手动切换和自动切换，深色风格也有区别。测试我相信您会想要测试此更改是否有效。为此，您只需在操作系统上启用深色主题，例如iOS深色主题。或者，如果您不想在操作系统主题上浪费时间，您可以在Firefox中强制执行此测试。方法如下：打开Firefox，在地址栏中输入about:config，然后按Enter。你会被要求冒险，接受它。在搜索栏中，搜索ui.systemUsesDarkTheme。将复选框更改为数字，然后单击+号。将值更改为1，然后单击勾号按钮。该页面现在应该是黑色的。回到您的网站，主题应该已自动更新为深色模式。如果要测试它是否切换回来，请将值更改为0。完成测试后，单击垃圾桶以删除该选项。您现在应该拥有一个响应迅速的网站，不仅在移动界面方面，而且在主题方面。我相信您的深夜访问者或只喜欢深色主题网站的访问者会感谢您。参考文字：https://kevq.uk/how-to-add-cs...关注公众号第一时间收到最新文章。如果对你有一点帮助，可以点赞、点赞、收藏，也可以小额打赏作者，鼓励作者写出更多更好的文章。
