我最近为我的网站设计并实现了一种深色模式,该模式使用自定义深色来匹配浅色(默认)配色方案,而且我最近还意识到 Chrome 78 有一个名为#enable-force-dark. 启用后(用户必须这样做),Chrome 会自动尝试将网站转换为深色主题。它与操作系统的偏好分开,这意味着用户可以在系统范围内使用浅色模式,但启用此标志后,Chrome 仍将进行转换。
我正在使用以下代码来检测用户的设备是否像其他线程所建议的那样更喜欢暗模式。请注意,我正在使用 javascript 检测它,因为有一个按钮可以来回切换它,最终得到比使用@media查询更好的解决方案。
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// my dark mode code goes here
}
Run Code Online (Sandbox Code Playgroud)
这个if语句是在一个 jQuery$(window).load函数下的,它完美地工作。
我需要的是能够检测到 Chrome 的新#enable-force-dark标志,逆转 Chrome 所做的更改,并启用我的,因为 Chrome 转换不完整,它搞砸了我的自定义样式。我知道这个功能没有被广泛使用,但我想面向未来。
这有可能吗?我不需要要求用户禁用该标志,但如果有必要我会。谢谢!
我的网站上有以下预加载器代码:
setTimeout(function() {
document.getElementById("loader-wrapper").style.display = 'none';
}, 1250);Run Code Online (Sandbox Code Playgroud)
<div class="loader-wrapper" id="loader-wrapper">
<div id="loading">
<div class="loader"></div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
目前 div 在 1.25 秒后消失,但如何loader-wrapper在 1.25 秒后淡出(不使用 CSS 或 jQuery)?