编辑“prefers-color-scheme”值以强制使用暗模式答案

【问题标题】：Edit "prefers-color-scheme" value to force Dark Mode编辑“prefers-color-scheme”值以强制使用暗模式
【发布时间】：2020-11-18 12:17:58
【问题描述】：

我一直在寻找解决方案（在线和在 Chrome 控制台中），但没有成功。

实现暗模式的“正确”方式是使用带有“prefers-color-scheme”参数的媒体查询：

body {
    color:#fff;
}

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

If you can read this text Dark Mode is Working

某些浏览器（IE、Firefox Mobile 等）或使用 Xamarin 制作的应用程序无法以正确的方式传递此参数，因此我正在寻找一种手动更改它的方法。可能是这样的：

screen.prefers-color-scheme = "dark"; //or
window.prefers-color-scheme = "dark"; //or
navigator.prefers-color-scheme = "dark";

我希望它是一个可从控制台读取的变量，但我浪费了很多时间寻找它但没有成功，我还阅读了许多关于名为“color-scheme”的元的帖子，但在我的项目中没有这样的东西（并且暗模式工作正常）

此参数在 Windows 和 Mac osx 上实时读取，如果您在打开浏览器的情况下切换主题，则会切换暗模式。

这可以保存在会话中吗？我疯了？？？？

【问题讨论】：

您不能在网页中使用 JavaScript 设置prefers-color-scheme（据我所知）。但是，如果您只想切换设置以进行调试，则可以在 Chrome DevTools 中进行。如果您打开了 DevTools，请打开“运行命令”窗口。您可以使用 Ctrl-Shift-P 或 Cmd-Shift-P 执行此操作。然后输入Emulate CSS prefers-color-scheme: light 或Emulate CSS prefers-color-scheme: dark。
很高兴您提出这个问题，不仅仅是“如何根据偏好切换颜色”，而是“我可以更改该偏好”吗？ IMO，您是否应该进行辩论不一定是必要的。这是一个很好的问题，我很想知道答案是否会改变。显然，有一些简单的方法可以检测偏好并将类应用于您的页面。但是，如果您基于prefers-color-scheme: dark 在整个样式表中写了很多修改，然后有人过来说他们想添加一个切换怎么办？这就是我所在的地方......

标签： javascript css media-queries

【解决方案1】：

不，很遗憾，您不能手动设置 prefers-color-scheme。我寻找了相同的解决方案，但 AFAIK 无法通过 JavaScript 覆盖浏览器的设置：有几种替代解决方案，主要是 focused on CSS variables。恕我直言，这很糟糕，因为您必须在正确的方式之间进行选择，以原生支持浅色和深色主题，或者使用变量模拟原生属性，但现在没有解决方法就无法实现这一目标。

已编辑：另外……暗模式，因为它打算在移动设备上呈现，应该直接从智能手机的设置中设置：所以浏览器只是涉及的元素之一。这就是为什么你不能改变这一点，我猜。

【讨论】：

那么，如果您希望您访问的所有网页都设置为暗模式，但您的操作系统由于某种原因无法设置为暗模式怎么办？
@MarkJeronimus 只是将其设置为默认样式表，没有特定的媒体查询，并通过 JavaScript 管理可选开关（例如，用不同的轻模式、样式表覆盖默认值）。