编辑“prefers-color-scheme”值以强制暗模式

Question

我一直在寻找解决方案（在线和在 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 上实时读取，如果您在浏览器打开的情况下切换主题，黑暗模式将切换。

这可以保存在会话中吗？我失去理智

Answer 1

不，不幸的是您无法手动设置\xe2\x80\x99 prefers-color-scheme。我寻找相同的解决方案，但据我所知不可能通过 JavaScript 覆盖 browser\xe2\x80\x99 设置：有几种替代解决方案，主要集中在 CSS 变量上。恕我直言，这很糟糕，因为您必须在本地支持浅色和深色主题的正确方法之间进行选择，或者使用变量模拟本机属性，但目前没有解决方法可以实现这一点。

\n

编辑：加上 \xe2\x80\xa6 黑暗模式，因为它旨在在移动设备上渲染，应该直接从智能手机\xe2\x80\x99s 设置中设置：所以浏览器只是涉及的元素之一。我猜这就是为什么你不能改变这个的原因。

\n