【问题标题】: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
  • 嗨,这只适用于野生动物园吗?简而言之,我需要一些东西来检测是否正在使用暗模式并忽略它(暗模式不会影响网站)或告诉用户将其关闭。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-05-31
  • 1970-01-01
  • 2011-04-05
  • 2022-12-24
  • 2016-02-03
  • 2013-01-24
  • 1970-01-01
相关资源
最近更新 更多