如何不让手机上的暗模式影响我的网站？答案

【问题标题】：How to not let dark mode on phone affect my website?如何不让手机上的暗模式影响我的网站？
【发布时间】：2020-09-10 15:31:37
【问题描述】：

当手机在系统 UI 中设置了暗模式时，它会影响我网站上的 html 和 css，例如改变颜色。我不希望这种情况发生。有没有办法阻止 UI 暗模式改变我的 html 的样式？

以下是我添加的 sn-ps，但没有给出任何结果。

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

}

【问题讨论】：

欢迎来到网络，在这里您几乎无法控制任何事情。最好的办法是接受它并与用户想要的东西一起工作，而不是试图与之抗争。

标签： html ios-darkmode android-darkmode

【解决方案1】：

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

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

更多详情check this website

【讨论】：

这仅适用于 Safari 对吧？我尝试在我的 css 中添加 sn-ps（在要发布的更新中找到）但没有结果。
@KyleSloper 在您的帖子中，您只有在首选颜色主题为浅色时才会激活的媒体查询。所以当用户打开暗模式时，这个 CSS 不会做任何事情！您需要将媒体查询设置为暗！
我该如何解决这个问题？
看看我在第一行看到的帖子：@media (prefers-color-scheme: dark)。最后一个词是dark，这就是你想要使用的！ @KyleSloper
嗨，这只适用于野生动物园吗？简而言之，我需要一些东西来检测是否正在使用暗模式并忽略它（暗模式不会影响网站）或告诉用户将其关闭。