昵称1234
昵称1234
  • 发布:2022-11-25 12:08
  • 更新:2022-11-25 12:08
  • 阅读:1158

安卓终于支持检测系统深色模式(暗黑模式)了

分类:HTML5+

这是官方更新有关于检测深色模式的文档
目前有版本兼容问题,安卓10以下不可以使用,而且要注意的是,不能使用真机调试,真机调试只能检测出light,检测不出dark,建议写好之后打包测试。

manifest.json节点添加,不添加无法检测暗黑模式

"plus": {    
"distribute": {    
  "google": {    
    "defaultNightMode": "auto"    
  },    
},  
}

检测系统深色模式

//官方方法  
function getUIStyle(){    
  plus.nativeUI.setUIStyle("auto")  
  var style = plus.navigator.getUIStyle();    
  if('dark'==style){    
    console.log('当前为暗黑模式');    
  }else{    
    console.log('当前为普通模式');    
  }    
}  

//其他检测方法 如不生效请在页面添加<meta name="color-scheme" content="light dark">  
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {  
        console.log('当前为暗黑模式');    
    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {  
         console.log('当前为普通模式');    
    } else {  
            console.log("获取系统深浅模式失败");  
   }

动态检测系统深浅模式切换

//官方方法  
  document.addEventListener('uistylechange', function(){    
    var style = plus.navigator.getUIStyle();    
    console.log(('dark'==plus.navigator.getUIStyle())?'切换为暗黑模式':'切换为普通模式');    
  }, false);  

//其他方法 如不生效请在页面添加<meta name="color-scheme" content="light dark">  
let listeners = {  
        dark: (mediaQueryList) => {  
            if (mediaQueryList.matches) {  
                console.log('当前为暗黑模式');    
            }  
        },  
        light: (mediaQueryList) => {  
            if (mediaQueryList.matches) {  
                 console.log('当前为普通模式');    
            }  
        }  
    }  
    window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)  
    window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
2 关注 分享
极昼 TestWZ

要回复文章请先登录注册