【问题标题】：how to prevent force dark mode by system?如何防止系统强制暗模式？
【发布时间】：2021-10-24 01:52:07
【问题描述】：

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

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

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

【问题讨论】：

你不能对用户强加任何东西。如果他们更喜欢以自己的风格查看它，他们可以以自己的（深色）风格查看它。
@cloned 我只是不想让系统覆盖我的设置。
这就是我所说的：你不能将你的设置强加给用户。如果用户系统设置为覆盖您的网站，那么您将无能为力。
我经常不得不使用开发工具和/或我的 Stylus 或 Stylebot 插件来修补网站，因为“以它的构建方式”对我来说是不可读的。您的小字体粗细：较浅的白底灰文本可能看起来很酷，但 I 无法阅读。这就是为什么最终用户将总是被允许并能够覆盖您的“设置”。
+bump，顺便说一句——您可能还希望考虑这一点：假设人们将使用深色或浅色模式，并使您的页面在这些模式下尽可能可读模式（即 chrome:flags、edge:flags 等）至少会通过这些模式几页，直到您了解暗模式如何与您所写的内容相矛盾，之后您就会掌握它的窍门。拥抱黑暗模式的想法——它不会很快消失，这是我个人不得不等待 20 年的功能，我们中的许多人无法阅读低对比度的内容，需要修改我们阅读的内容以适应我们疲惫的眼睛！

【解决方案1】：

我发现的一种解决方法是使用 svg 图像作为在暗模式下切换颜色的背景

【讨论】：

【解决方案2】：

我找到了一个解决方法（至少对我来说）：

如果 body 的背景颜色设置为黑色，并且 background-image: linear-gradient 添加了明亮的颜色（以覆盖背景颜色），chrome 似乎被欺骗认为一切都很好，它会停止触摸/重新着色其他元素。至少从今天开始（Chrome 版本 86）——也许这会有所帮助……

body { 
   background-image: linear-gradient(#ffffff, #ffffff); 
   background-color: #000000;
}

【讨论】：

【解决方案3】：

TL;DR 目前不可能

我们为什么需要这个？

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

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

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

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

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

每次更新都会越来越好。

它也与 dev-inspection-tool 中的颜色选择器混淆...

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

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

【讨论】：

用户是国王。如果我有强制高对比度模式的设置，那可能是因为我的视力限制需要它；你会找到一种方法来覆盖它吗？强迫您的网站不被我阅读？ CSS 中的!important 规则是为用户创建的，以便能够覆盖站点的样式，而不是相反。 “如果您开发模板并拥有 2017-2018 年的旧物品，客户会在客户投诉时要求退款。” 字面意思 您的处理这个问题的工作，可能是通过保持您的模板更新和现代。
@StephenP，“更新和现代”我不知道这对#enable-force-dark 意味着什么。我可以使用 --force-dark-mode （现代），检测它并使用 "prefers-color-scheme:dark" 修改需要更改的任何颜色/图像。 #enable-force-dark 是一种残酷的方法，并试图自行完成。它并不完美。
我的意思是——“旧”项目需要更新——也就是说，用于网站建设的模板应该不断修改以适应新技术、浏览器版本，操作系统功能（如亮/暗模式），当然，保持“合理”数量的向后兼容性。但是如果用户想要使用 force-dark-mode 的大锤，就没有办法阻止它。打开它进行测试；教育客户不可能控制一切。对不起，我不认为我在这里说清楚。我的主要问题是 OP 想要强制查看，而网络不能那样工作。
“开启测试”这绝对是我认为最好的建议。
这不是答案。