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

否，很遗憾，您无法手动设置prefers-color-scheme。我寻找了相同的解决方案，但AFAIK无法通过JavaScript覆盖浏览器的设置：有几种替代解决方案，主要是focused on CSS variables。恕我直言，这很不好，因为您必须在正确的方式中选择以本地方式支持亮色和深色主题，或者使用变量模拟本地属性，但是现在没有解决方法，没有任何方法可以实现。

已编辑：此外，应在智能手机的设置中直接设置应在移动设备上呈现的暗模式：因此，浏览器只是其中涉及的元素之一。我猜这就是为什么你不能更改它。

编辑“首选颜色方案”值以强制使用暗模式

1 个答案: