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

前言

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

效果

深色模式效果

浅色模式效果

实现

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

kotlin 复制代码

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

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

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

base/element/color.json

json 复制代码

{
  "name": "nav_icon",
  "value": "#ffffff"
}

dark/element/color.json

json 复制代码

{
  "name": "nav_icon",
  "value": "#000000"
}

页面使用

scss 复制代码

Image(this.item.icon)
  .width(24)
  .height(24)
  .fillColor($r('app.color.nav_icon'))

因为name同名，不同模式下会取不同的色值，这样我们就可以达到适配的目的

扩展

如果我们需要自己控制软件的模式如何去做呢？

准备图标

笔者从阿里巴巴矢量图标库找的svg图标

开发

监听颜色模式的变化

在EntryAbility中新增onConfigurationUpdate事件，将颜色模式加到全局的AppStore中

javascript 复制代码

onCreate() {
    AppStorage.setOrCreate('colorMode', this.context.config.colorMode);
}

onConfigurationUpdate(newConfig: Configuration): void {
  AppStorage.set('colorMode', newConfig.colorMode);
}

页面开发

scss 复制代码

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