js监听暗黑模式(DarkMode)

June 12, 2020 ... ☕️ 1 min read

昨天在面试的时候,被问到博客为什么是白底白字,得反选才能看到?

一脸懵逼之后,被告知应该是mac的深色主题带来的效果。看一下代码,发现是fork过来的代码,里面包含了深浅色适配,本来是有按钮手动切换的,妹想到,还有js自动根据mac的深/浅主题切换。知道原理后,修改就简单了。

如何适配深/浅主题

这个主要是Apple提出来的,所以对mac、iPhone特别友好,但是其他浏览器的话……

prefers-color-scheme

可以用css适配:

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

也可以用js,关键代码只有一行:

window.matchMedia("(prefers-color-scheme: dark)").matches

matchMedia这个方法比较少用,主要作用是个字符串匹配,简单了解一下

说明(来自 MDN

matchMedia方法,返回一个新的MediaQueryList对象,参数是待解析的media query字符串。

比如在css里用media query来适配不同屏幕尺寸

@media (min-width: 600px) { 
  // ...
}

那么就可以使用如下的js代码来查看当前是不是匹配到了这个query

window.matchMedia('(max-width: 600px)').matches // true 或 false

#mac

SideEffect is a blog for front-end web development.
Code by Axiu / rss