如何避免手机暗黑模式影响我的网站？

Question

当手机系统UI启用了黑暗模式时，会影响到我网站上的HTML和CSS，例如改变颜色。我不希望这种情况发生。有没有办法阻止UI暗模式更改我的HTML样式？

以下是我添加的代码片段，但没有任何效果。

    @media screen and (prefers-color-scheme: light) {
    body {
      background-color: white;
      color: black;
    }
  }
  @media (prefers-color-scheme: light) {

}

- user12165978

---

欢迎来到网络世界，在这里你对任何事情都没有太多的控制。最好的做法是接受它并与用户合作，而不是试图与之抗争。 - Brad

Answer 1

你可以使用特殊的自定义CSS媒体查询。当您设备的首选颜色方案为暗色时，此媒体查询将被激活。这样，当用户喜欢暗模式时，您可以为其提供不同的样式。

@media (prefers-color-scheme: dark) {
  /* Your css */
}

更多详情请查看此网站

- user10791031

---

这只适用于Safari浏览器，对吧？我尝试将代码片段（在更新的帖子中找到）添加到我的CSS中，但最终没有任何结果。 - user12165978

我应该怎么修复它？ - user12165978

看一下我在第一行发布的内容：@media (prefers-color-scheme: dark)。最后一个单词是dark，这就是你想要使用的！@KyleSloper - user10791031

嗨，这只适用于Safari吗？简单来说，我需要一个能够检测是否正在使用深色模式的东西，并且要么忽略它（深色模式不会影响网站），要么告诉用户关闭它。 - user12165978

我有一个已经是暗色主题的网站，但由于Firefox中的新暗色模式，一些颜色发生了变化，破坏了整体风格。我该如何消除这些意外的变化？ - rubo77