H5網(wǎng)頁(yè)適配系統(tǒng)夜間主題

文章導(dǎo)讀

現(xiàn)在無(wú)論是在PC端、還是手機(jī)端系統(tǒng)都加入了夜間主題，大多數(shù)App為了提高用戶體驗(yàn)性，也加上了夜間主題。甚至是可以根據(jù)系統(tǒng)切換主題來(lái)變換自身主題，這樣的反饋給用戶還是挺舒適的。

好了，進(jìn)入正題，要實(shí)現(xiàn)上述效果，我們只需要通過(guò)CSS的媒體查詢prefers-color-scheme屬性，用于檢測(cè)用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色。

檢測(cè)系統(tǒng)當(dāng)前主題

@media (prefers-color-scheme: dark) {            body {                background: #121212;                color: #ffffff;            }            article{                color:rgba(255,255,255,.86);            }        }@media?(prefers-color-scheme:?light)?{            body {                background: #fffff;                color: #000;            }            article{                color:rgba(0,0,0,.86);            }        }

dark和light指的分別是暗黑和亮模式，那么當(dāng)一加載網(wǎng)頁(yè)的時(shí)候，通過(guò)媒體查詢能知道該渲染哪套主題了。

但是當(dāng)手機(jī)系統(tǒng)切換主題后，怎么讓網(wǎng)頁(yè)也自動(dòng)切換主題顏色呢？

監(jiān)聽系統(tǒng)主題切換

/*判斷是否支持主題色*/
    if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {        alert('瀏覽器不支持主題模式')
        console.log('Browser doesn\'t support dark mode');    }
    /*判斷是否處于深色模式*/    if(window.matchMedia('(prefers-color-scheme: dark)').matches){        console.log('深色模式', document.getElementsByTagName('html'));        document.getElementsByTagName('html')[0].style.background = '#000';        document.getElementsByTagName('html')[0].style.color = '#fff';    }
    /*判斷是否處于淺色模式*/    if(window.matchMedia('(prefers-color-scheme: light)').matches){        //Do some thing        console.log('淺色模式');        document.getElementsByTagName('html')[0].style.background = '#fff';        document.getElementsByTagName('html')[0].style.color = '#000';    }

    /*模式切換聽器*/    var listeners={        dark: function(mediaQueryList ){            if(mediaQueryList.matches){                // alert('您切換到深色模式了！')            }        },        light: function(mediaQueryList){            if(mediaQueryList.matches){                // alert('您切換到淺色模式了！')            }        }    }
    window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)    window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)

網(wǎng)頁(yè)中注冊(cè)了兩個(gè)監(jiān)聽器，當(dāng)監(jiān)聽到手機(jī)系統(tǒng)是否有切換的時(shí)候，會(huì)響應(yīng)對(duì)應(yīng)的事件，到時(shí)候，可以讓網(wǎng)頁(yè)自動(dòng)刷新，或者自動(dòng)更新CSS樣式就看聽君處理了。

落魄時(shí)，一定要把自己當(dāng)回事，發(fā)跡時(shí)，一定要把別人當(dāng)回事。

--《劍來(lái)》