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

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

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

颜色模式和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-Notes