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

Question

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

以下是我添加的片段，但没有给我任何结果。

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

}

Answer 1

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

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

有关更多详细信息，请查看此网站