CSS prefers-color-scheme 适用于 Firefox 但不适用于 Chrome 问题答案

【问题标题】：CSS prefers-color-scheme works on Firefox but not on Chrome issueCSS prefers-color-scheme 适用于 Firefox 但不适用于 Chrome 问题
【发布时间】：2021-03-28 20:32:35
【问题描述】：

我的问题是我的偏好颜色方案样式仅适用于 Firefox，不适用于 Chrome。

这是代码示例。现在我认为这可能是我的某些 HTML 的问题，无论出于何种原因。

@media (prefers-color-scheme: dark) {
  body {
    background-color: red;
  }
}

<!DOCTYPE html>

<body>
  <h1>test</h1>
</body>

</html>

现在我在一个完全不同的文件中测试它，它在 Firefox 中运行，但在 Chrome 中不可用。有没有人有任何理由为什么以及如何解决这个问题？

【问题讨论】：

您可以在codepen.io/kleinfreund/pen/NmpKZM 进行测试...目前在 Linux Mint 上的 Chrome 或 Chromium 80.0.3987.122 上不适合我，但 Firefox 73.0.1 在同一系统上工作。跨度>

标签： html css

【解决方案1】：

Chrome 仅从 Chrome 版本 76 开始提供对 prefers-color-scheme 的支持，该版本于 2019 年 7 月 30 日（距离本文发布 5 天前）发布。将您的 Chrome 更新到最新版本将显示您的代码正确应用了prefers-color-scheme。

您可以通过点击右上角的三个点、帮助和About Google Chrome 来更新 Chrome。这将通知您当前的 Chrome 版本，如果您没有最新版本，则会提示自动更新：

您可以在CanIUse查看对prefers-color-scheme的支持，这表明Edge、Firefox、Chrome和Safari在各自最新版本下都支持prefers-color-scheme：

检查你的浏览器是否支持prefers-color-scheme，下面的sn-p在深色主题下是红色，在浅色主题下是蓝色，如果你的浏览器不支持prefers-color-scheme，则为白色：

@media (prefers-color-scheme: dark) {
  html {
    background-color: red;
  }
}

@media (prefers-color-scheme: light) {
  html {
    background-color: blue;
  }
}

【讨论】：

@LyonJenkins - 不用担心；乐意效劳！一旦您确认这可以解决您的问题，请不要忘记点击投票按钮下方的灰色复选标记mark it as the solution - 这会将其从“未回答的问题”队列中删除，并为这两个问题授予声誉提问者和问题回答者。您可以在提出任何问题后 15 分钟内完成该操作。当然，这么说，您没有义务将答案标记为正确，尽管这有助于保持事情顺利进行:)
奇怪，在 Chrome 上我看到蓝色，firefox 我看到红色，Ubuntu 18
今天 2021 年 3 月 28 日。Windows 7。我的 Chrome 和 Firefox 已更新。但prefers-color-scheme 不起作用（。它仅适用于 Windows 10。
不适用于 Ubuntu 的 Chrome。