CSS3新增prefers-color-scheme深色模式兼容与适配
七娃博客947人阅读
说起深色模式,还记得前段时间ios版微信APP第一版没有适配深色模式,苹果就大嚷大叫了,以致于下一版微信不得不在ios适配了深色模式。
这个事情只是个引子,也表明用户逐渐开始重视暗色模式,那假如说用户系统开启了暗色模式,然后访问了你的网站,大晚上亮瞪瞪的也不是太好看吧,对用户看惯了深色,一下子亮了起来,不得不说,太刺眼了!还是要兼容适配一下这个模式,注重一下用户体验!
颜色模式和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}
}
@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);
}
}
浏览器兼容:
测试评论功能