这是官方更新有关于检测深色模式的文档
目前有版本兼容问题,安卓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)
0 个评论
要回复文章请先登录或注册