css 匹配媒体以检测首选配色方案不适用于Safari

bpzcxfmw 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(127)

我试图根据用户的系统设置实现一个黑暗模式。为此我使用了@media查询prefers-color-scheme: dark。这是可行的，但我也需要在JavaScript中做一些检查。

detectColorScheme() {
   if (!window.matchMedia) {
     return false;
   } else if (window.matchMedia('(prefers-color-scheme: dark').matches) {
     this.isDarkMode = true;
   }
}

这段代码在Chrome上可以正常工作，但在Safari上就不行了。它仍然返回false（仅在Safari上），即使系统暗模式被激活。

css

来源：https://stackoverflow.com/questions/59705634/match-media-to-detect-preferred-color-scheme-isnt-working-for-safari

1条答案

按热度按时间

v8wbuo2f1#

您的代码中缺少一个括号）。更新的代码：

detectColorScheme() {
   if (!window.matchMedia) {
     return false;
   } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
     this.isDarkMode = true;
   }
}

另一个例子：

window.matchMedia('(prefers-color-scheme: dark)').matches
window.matchMedia('(prefers-color-scheme: light)').matches
window.matchMedia('(prefers-reduced-motion)').matches
window.matchMedia('(max-width: 600px)').matches

赞(0）回复(0）举报 2022-11-19

我来回答

css 匹配媒体以检测首选配色方案不适用于Safari

1条答案

相关问题

热门标签

最新问答