如何防止系统强制深色模式？

Question

网站和应用程序上的暗/亮模式切换设置正在流行，并且还提供一些系统默认主题模式，例如 Chrome 开发工具提供强制暗模式，但我希望我的网站能够以其构建的方式进行查看。那么，如何防止浏览器强制使用深色模式？

我尝试过prefers-color-scheme媒体查询，但我想，我做错了什么或遗漏了一些东西。

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

Answer 1

Google 发布了一篇文章，解释了启用强制黑暗模式的不同方法，以及通过 JavaScript 和 CSS 处理它们的策略。

通过在 Chrome 中强制使用深色模式，您可以进行深色模式检测，并且它们包含了一个选择退出的 CSS 属性。

:root {
  color-scheme: only light;
}

或者针对特定项目：

#my-onlylight-element {
  color-scheme: only light;
}

Safari 似乎也支持这一点（此表中的 Chrome 信息已过时，已报告错误）：https: //developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Answer 2

TL;DR 目前不可能

似乎有些 Android 手机的 Chrome 会根据他们为手机选择的主题模式（浅色与深色）默认启用此功能。

如果您开发模板并拥有 2017-2018 年的旧商品，当客户投诉时，客户会要求退款。如果您不知道存在这样的功能，则几乎不可能进行诊断。在许多情况下，该网站无法阅读。

它使网站上的暗/亮切换体验失效（破坏了 CSS 网站上的体验）。无法检测到这种情况何时发生也没有帮助，我们可以删除切换并直接提供深色主题或警告用户出现问题。

目前还没有办法改变它，他们甚至改变了图像的背景，而且他们也做得很好，.jpeg...。这不仅仅是简单的颜色交换。

我认为他们遵循“用户为王”的方针。如果用户想要强制执行，他们就会站在用户一边。

每次更新都变得越来越好。

它也弄乱了开发检查工具中的颜色选择器......

即使他们要添加“修复”，它也无法在旧浏览器上使用。我认为他们甚至没有想过实施绕过或“白名单”的方法。

我的 css 结果好坏参半。在一个简单的页面中它可以工作，但在更复杂的项目中，有太多的边缘情况无法处理所有这些，并且无法修复图像（...它替换了图像中的背景！）

用户_**是**_国王。如果我有强制使用高对比度模式的设置，可能是因为我的视力限制需要它；接下来你会找到一种方法来覆盖它吗？强制我无法阅读您的网站？CSS 中的 `!important` 规则是为_users_ 创建的，以便能够覆盖网站的样式，而不是相反。_“如果您开发模板并拥有 2017-2018 年的旧商品，客户在收到投诉时会要求退款。”_从字面上看_**您的**工作就是处理此问题，可能是通过保持模板更新和现代来实现的。 (4认同)