哈嘍，各位小伙伴，大家好，我是 布衣前端，每次分享希望都能大家有所幫助。

prefers-color-scheme這個(gè)新的css特性，想必大家并不陌生，寫文章的目的就是分享給大家怎么正確用好它以及提升網(wǎng)站用戶體驗(yàn)。

prefers-color-scheme是CSS?媒體特性【@media】用于檢測(cè)用戶是否有將操作系統(tǒng)的主題色設(shè)置為亮色【light】或者暗色【dark】，這倆個(gè)也是prefers-color-scheme重要屬性。W3C?在?2020?年?7?月?31日首次提到css的prefers-color-scheme新特性。原始?Wiki?貢獻(xiàn)者有：RainSlide、?ZZES_REN?、urusai-me和?SimGenius。

先來目睹它的強(qiáng)度兼容性范圍：

當(dāng)前prefers-color-scheme新特性支持各大主流電腦【window和IOS系統(tǒng)，Linux系統(tǒng)可以用第三方工具】端瀏覽器谷歌、火狐等，包括手機(jī)端的安卓和蘋果，足以說明prefers-color-scheme屬性已經(jīng)穩(wěn)定成熟，可以用于生產(chǎn)環(huán)境了。

如何正確使用prefers-color-scheme屬性呢？答：需要在全局css文件內(nèi)部寫入下面代碼即可，用于監(jiān)聽系統(tǒng)主題變化結(jié)果：

當(dāng)操作系統(tǒng)電腦端或者手機(jī)操作系統(tǒng)主題顏色變化時(shí)就能監(jiān)聽到主題，然后就會(huì)按照你預(yù)期設(shè)置的顏色進(jìn)行渲染主題色。比如這里的body暗色主題是background-color: var(--color-background)，亮色主題是background-color: var(--white-color-background);

提示：:root表示根元素，擁有更高的優(yōu)先級(jí)，這里可以設(shè)置全局樣式變量，通過css的var方法來獲取對(duì)應(yīng)變量且獲得相應(yīng)的樣式。

那么除了媒體監(jiān)聽主題變化，能不能自定義主題呢？答：能，可以通過js來操作操作，實(shí)現(xiàn)自由切換主題顏色，具體細(xì)節(jié)請(qǐng)往下看。

這里布衣前端寫了一個(gè)手動(dòng)切換網(wǎng)站主題的html完整示例代碼，看完代碼不明白的請(qǐng)留言哈，感謝大家支持。

把上面完整代碼復(fù)制粘貼放到一個(gè)html文件內(nèi)，雙擊打開到瀏覽器。此時(shí)的默認(rèn)效果是【亮色】主題：

作用關(guān)鍵代碼如下

當(dāng)設(shè)置windows系統(tǒng)主題為【暗】

再去刷新瀏覽頁面，此時(shí)頁面效果是【暗色】主題，原因：當(dāng)window10設(shè)置【暗色】主題后，css的prefers-color-scheme屬性通過@media媒體監(jiān)聽到變化后，觸發(fā)了css媒體事件，執(zhí)行樣式渲染，這個(gè)樣式就是根據(jù)開發(fā)者設(shè)置的主題樣式來渲染的。

作用關(guān)鍵代碼如下

當(dāng)網(wǎng)站不滿足系統(tǒng)默認(rèn)主題，還想提供用戶自己切換主題的功能，代碼中有兩個(gè)按鈕，【淺色主題】和【暗色主題】就是干這件事情的。用戶可以隨意切換，具體切換代碼可以到j(luò)s部分查看。

除了css媒體能監(jiān)聽操作系統(tǒng)主題變化，js也能監(jiān)聽的，當(dāng)監(jiān)聽到后可以增強(qiáng)js業(yè)務(wù)邏輯，比如設(shè)置某個(gè)主題下布局變化、語音播報(bào)當(dāng)前模式等等和其他業(yè)務(wù)處理邏輯，需要設(shè)置頁面加載后添加如下代碼即可：

當(dāng)監(jiān)聽到主題變化時(shí)就可以編寫其他業(yè)務(wù)邏輯了。學(xué)完了就去給自己的項(xiàng)目增加主題切換體驗(yàn)一哈prefers-color-scheme屬性神奇之處吧。

總結(jié)prefers-color-scheme監(jiān)聽方式：

1. css里通過@media監(jiān)聽

2. js里面通過matchMedia監(jiān)聽

3. 兩種方式都能監(jiān)聽到操作系統(tǒng)主題變化后的值

好了，今天的分享到這里就結(jié)束了，希望對(duì)小伙伴們有所幫助，寫作不容易都看到這里了，幫布衣前端點(diǎn)個(gè)贊吧。

更多精彩內(nèi)容，歡迎關(guān)注【布依前端】公眾號(hào)，更多前端文章在陸續(xù)更新中。