前端必备：prefers-color-scheme自由切换网站主题背景色变化，提升客户体验
哈喽，各位小伙伴，大家好，我是 布衣前端，每次分享希望都能大家有所帮助。
prefers-color-scheme这个新的css特性，想必大家并不陌生，写文章的目的就是分享给大家怎么正确用好它以及提升网站用户体验。
prefers-color-scheme是CSS 媒体特性【@media】用于检测用户是否有将操作系统的主题色设置为亮色【light】或者暗色【dark】，这俩个也是prefers-color-scheme重要属性。W3C 在 2020 年 7 月 31日首次提到css的prefers-color-scheme新特性。原始 Wiki 贡献者有：RainSlide、 ZZES_REN 、urusai-me和 SimGenius。
先来目睹它的强度兼容性范围：
当前prefers-color-scheme新特性支持各大主流电脑【window和IOS系统，Linux系统可以用第三方工具】端浏览器谷歌、火狐等，包括手机端的安卓和苹果，足以说明prefers-color-scheme属性已经稳定成熟，可以用于生产环境了。
如何正确使用prefers-color-scheme属性呢？答：需要在全局css文件内部写入下面代码即可，用于监听系统主题变化结果：
当操作系统电脑端或者手机操作系统主题颜色变化时就能监听到主题，然后就会按照你预期设置的颜色进行渲染主题色。比如这里的body暗色主题是background-color: var(--color-background)，亮色主题是background-color: var(--white-color-background);
提示：:root表示根元素，拥有更高的优先级，这里可以设置全局样式变量，通过css的var方法来获取对应变量且获得相应的样式。
那么除了媒体监听主题变化，能不能自定义主题呢？答：能，可以通过js来操作操作，实现自由切换主题颜色，具体细节请往下看。
这里布衣前端写了一个手动切换网站主题的html完整示例代码，看完代码不明白的请留言哈，感谢大家支持。
把上面完整代码复制粘贴放到一个html文件内，双击打开到浏览器。此时的默认效果是【亮色】主题：
作用关键代码如下
当设置windows系统主题为【暗】
再去刷新浏览页面，此时页面效果是【暗色】主题，原因：当window10设置【暗色】主题后，css的prefers-color-scheme属性通过@media媒体监听到变化后，触发了css媒体事件，执行样式渲染，这个样式就是根据开发者设置的主题样式来渲染的。
作用关键代码如下
当网站不满足系统默认主题，还想提供用户自己切换主题的功能，代码中有两个按钮，【浅色主题】和【暗色主题】就是干这件事情的。用户可以随意切换，具体切换代码可以到js部分查看。
除了css媒体能监听操作系统主题变化，js也能监听的，当监听到后可以增强js业务逻辑，比如设置某个主题下布局变化、语音播报当前模式等等和其他业务处理逻辑，需要设置页面加载后添加如下代码即可：
当监听到主题变化时就可以编写其他业务逻辑了。学完了就去给自己的项目增加主题切换体验一哈prefers-color-scheme属性神奇之处吧。
总结prefers-color-scheme监听方式：
css里通过@media监听
js里面通过matchMedia监听
两种方式都能监听到操作系统主题变化后的值
好了，今天的分享到这里就结束了，希望对小伙伴们有所帮助，写作不容易都看到这里了，帮布衣前端点个赞吧。
更多精彩内容，欢迎关注【布依前端】公众号，更多前端文章在陆续更新中。
