如何防止系统强制暗模式？

Question

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

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

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

原文由 lazzy_ms 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

https://developer.chrome.com/blog/auto-dark-theme/#detecting-auto-dark-theme

通过在 Chrome 中强制使用暗模式，您可以进行暗模式检测，并且它们包含一个 opt-out 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

原文由 hnilsen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

TL;DR 现在是不可能的

为什么我们需要这个？

似乎有些 Android 手机的 Chrome 默认启用了此功能，具体取决于他们为手机选择的主题模式（浅色与深色）。

如果你开发模板，有2017-2018年的旧货，有客户投诉，客户会要求退款。如果您不知道存在这样的功能，几乎不可能进行诊断。在许多情况下，网站不可读。

它使网站上的深色/浅色切换体验无效（破坏了 CSS 网站上如何操作的体验）。无法检测到这种情况何时发生也无济于事，我们可以移除开关并直接提供深色主题或警告用户出现问题。

没有解决方案

目前没办法改，他们连图片背景都改了，做的也不错，.jpeg…🤣😂。这不仅仅是简单的颜色交换。

我认为他们采用“用户为王”的方法。如果用户想要强制执行，他们将站在用户一边。

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

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

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

• 启用 Chrome 的 #enable-force-dark 标志后，自定义 CSS 可能会失败
• 某些网站上的白名单“强制黑暗模式”
• 应用程序特定覆盖力暗
• 网络暗模式完整指南

但

这里有一个概念方法： https ://stackoverflow.com/a/60462984/1427338

我对 css 的结果喜忧参半。在一个简单的页面中它可以工作，但在更复杂的项目中有太多的边缘情况来处理它们，并且没有修复图像（……它取代了图像中的背景！）

原文由 Jeffrey Nicholson Carré 发布，翻译遵循 CC BY-SA 4.0 许可协议