前端判斷系統主題

讓網頁適應系統主題及夜間模式。

1.使用CSS判斷
使用媒介查詢prefers-color-scheme，支持dark，light，no-preference三種模式。

/*深色*/
@media (prefers-color-scheme: dark) {
    body {
        background: rgb(53, 54, 58);
        color: rgba(238,238,238,1);
    }
}

/*淺色*/
@media (prefers-color-scheme: light) {
    body {
        background: rgb(255,255,255);
        color: rgba(51,51,51,1);
    }
}

2.js判斷

/*判斷是否支持主題色*/

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
    console.log('Browser doesn\'t support dark mode');
}

/*判斷是否處於深色模式*/
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
    //Do some thing
}

/*判斷是否處於淺色模式*/
if(window.matchMedia('(prefers-color-scheme: light)').matches){
    //Do some thing
}


/*模式切換聽器*/
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)

 3.效果展示（以谷歌首頁為例）