【鸿蒙开发】适配深浅色模式 原创

Aisanyi
发布于 2025-6-19 16:20
浏览
0收藏

前言

当前系统存在深浅色两种显示模式,为了给用户更好的使用体验,应用应适配深浅色模式。

效果

深色模式效果

【鸿蒙开发】适配深浅色模式-鸿蒙开发者社区

浅色模式效果

【鸿蒙开发】适配深浅色模式-鸿蒙开发者社区

实现

首先我们需要设置软件跟随系统的模式来适配

this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);

在深色模式的时候,系统会扫描resources下的dark目录下是否有对应的资源文件,用于深色模式。

在resources目录下的base和dark目录下分别设置不同的color资源(key保持一致)

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,
  });

效果

【鸿蒙开发】适配深浅色模式-鸿蒙开发者社区
【鸿蒙开发】适配深浅色模式-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2025-6-19 16:21:33修改
收藏
回复
举报
回复
    相关推荐