说起深色模式,还记得前段时间ios版微信APP第一版没有适配深色模式,苹果就大嚷大叫了,以致于下一版微信不得不在ios适配了深色模式。

这个事情只是个引子,也表明用户逐渐开始重视暗色模式,那假如说用户系统开启了暗色模式,然后访问了你的网站,大晚上亮瞪瞪的也不是太好看吧,对用户看惯了深色,一下子亮了起来,不得不说,太刺眼了!还是要兼容适配一下这个模式,注重一下用户体验!

CSS3新增prefers-color-scheme深色模式兼容与适配-Qui-Note

颜色模式和css自适应一样,会自动判断系统的颜色模式,然后适配当前网页的样式,但是前提是你使用了 prefers-color-scheme 进行适配:

1.prefers-color-scheme

  • no-preference系统默认模式
  • light表示系统使用浅色模式
  • dark表示系统使用深色模式

2.css兼容颜色模式

@media (prefers-color-scheme: dark) {
html, body{background: #000}
}
@media (prefers-color-scheme: light){
html, body{background: #fff}
} 

3.js判断颜色模式  

if (window.matchMedia('prefers-color-scheme: dark').matches) {
  alert("暗色模式")
} else {
  alert("浅色模式")
}

4.监听颜色模式切换

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
  if (e.matches) {
    alert("暗色模式")
  } else {
     alert("浅色模式")
  }
});

5.让网站兼容深色模式(张鑫旭大佬给的方案)

@media (prefers-color-scheme: dark) {
html, img {
    filter: invert(1) hue-rotate(.5turn);
} 
}

浏览器兼容:

CSS3新增prefers-color-scheme深色模式兼容与适配-Qui-Note