CSS3新增prefers-color-scheme深色模式兼容与适配
七娃博客58 次
说起深色模式,还记得前段时间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} }
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
评论 | 0 条评论