
回复
当前系统存在深浅色两种显示模式,为了给用户更好的使用体验,应用应适配深浅色模式。
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
在深色模式的时候,系统会扫描resources下的dark目录下是否有对应的资源文件,用于深色模式。
base/element/color.json
{
"name": "nav_icon",
"value": "#ffffff"
}
dark/element/color.json
{
"name": "nav_icon",
"value": "#000000"
}
页面使用
Image(this.item.icon)
.width(24)
.height(24)
.fillColor($r('app.color.nav_icon'))
因为name同名,不同模式下会取不同的色值, 这样我们就可以达到适配的目的
如果我们需要自己控制软件的模式如何去做呢?
笔者从阿里巴巴矢量图标库找的svg图标
在EntryAbility
中新增onConfigurationUpdate
事件,将颜色模式加到全局的AppStore
中
onCreate() {
AppStorage.setOrCreate('colorMode', this.context.config.colorMode);
}
onConfigurationUpdate(newConfig: Configuration): void {
AppStorage.set('colorMode', newConfig.colorMode);
}
页面开发
@StorageProp('colorMode') colorMode: ConfigurationConstant.ColorMode =
ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;
Image(this.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? $r('app.media.dark') :
$r('app.media.light'))
.width(20)
.height(20)
.onClick(() => {
this.getUIContext()
.getHostContext()?.getApplicationContext().setColorMode(this.colorMode ===
ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT :
ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
})
.position({
left: 16,
bottom: 16,
});