Vue2.6老项目升级至2.7并使用组合式Api写法记录

让网页适用系统主题色

使用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)

使用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);
    }
}

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 chaoyumail@126.com