鸿蒙开发：适配系统深浅色模式

原创

程序员一鸣

修改于 2025-01-08 13:27:43

2050

前言

运行环境：基于HarmonyOs NEXT
DevEco Studio：Build Version: 5.0.3.900
API：12
modelVersion：5.0.0

无论是Android还是iOS，在系统设置中，都有着深色和浅色两种外观模式，同样，鸿蒙系统中也存在这样的外观切换，如何让自己的应用，跟随着系统的模式进行动态切换呢？目前系统给我们提供了两种方式可以实现，一种是资源形式，一种是动态的代码形式。

资源形式实现

所谓资源形式，就是深色和浅色各有一套样式，比如颜色，浅色有一个，深色也有一个，当系统模式切换之后，便主动寻找对应模式下的颜色，同样，放到其它资源上也是类似。

首先，在resources资源下，定义出浅色模式对应的深色资源，命名为dark，把我们对应的颜色，或者图片，一一放到对应的模式下。

简单案例

一个很简单的页面，颜色和背景均选取资源下定义好的。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("鸿蒙开发：跟着系统深浅色适配")
        .fontSize(18)
        .fontColor($r("app.color.title_color"))
        .margin({ top: 10 })
      Text("无论是Android还是iOS，在系统设置中，都有着深色和浅色两种外观模式，同样，鸿蒙系统中也存在这样的外观切换，如何让自己的应用，跟随着系统的模式进行动态切换呢？目前系统给我们提供了两种方式可以实现，一种是资源形式，一种是动态的代码形式。")
        .fontSize(16)
        .fontColor($r("app.color.desc_color"))
        .margin({ top: 20 })
    }.backgroundColor($r("app.color.start_window_background"))
    .width("100%")
    .height("100%")
    .padding({ left: 20, right: 20 })
  }
}

浅色模式

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "title_color",
      "value": "#222222"
    },
    {
      "name": "desc_color",
      "value": "#666666"
    }
  ]
}

深色模式

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#000000"
    },
    {
      "name": "title_color",
      "value": "#ffffff"
    },
    {
      "name": "desc_color",
      "value": "#e8e8e8"
    }
  ]
}

实际效果

浅色模式

深色模式

图片资源适配

图片和颜色是类似的，浅色和深色放在对应的模式下即可。

Image($r('app.media.test'))
  .width(50)

代码形式

除了资源的形式之外，我们还可以通过代码的方式进行实现，代码的实现方式，需要我们监听系统的模式切换，然后，根据当前的模式，设置不同的资源样式即可。

监听系统的深色和浅色模式切换：

首先，针对当前的模式，先进行保存，这里使用的是AppStorage，保存当前模式，主要是初始化进来需要针对性的设置。

 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    AppStorage.setOrCreate('colorMode', this.context.config.colorMode)
  }

除了默认的之外，当系统的模式发生变化的时候，也需要进行保存，我们可以在在 AbilityStage 的 onConfigurationUpdate() 方法中获取最新的颜色模式同步更新到AppStorage中。

 onConfigurationUpdate(newConfig: Configuration): void {
    AppStorage.setOrCreate('colorMode', newConfig.colorMode)
    hilog.info(0x0000, 'testTag', 'the newConfig.colorMode');
  }

还是上边的那个案例，我们在UI页面进行动态的监听模式改变。

@Entry
@Component
struct Index {
  @State titleColor?: ResourceColor = undefined
  @State descColor?: ResourceColor = undefined
  @State bgColor?: ResourceColor = undefined
  @StorageProp('colorMode') @Watch('onColorModeChange') currentMode: number =
    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

  aboutToAppear(): void {
    this.onColorModeChange()
  }

  onColorModeChange(): void {
    if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      //浅色模式
      this.bgColor = "#ffffff"
      this.titleColor = "#222222"
      this.descColor = "#666666"
    } else {
      //深色模式
      this.bgColor = "#000000"
      this.titleColor = "#ffffff"
      this.descColor = "#e8e8e8"
    }
  }

  build() {
    Column() {
      Text("鸿蒙开发：跟着系统深浅色适配")
        .fontSize(18)
        .fontColor(this.titleColor)
        .margin({ top: 10 })
      Text("无论是Android还是iOS，在系统设置中，都有着深色和浅色两种外观模式，同样，鸿蒙系统中也存在这样的外观切换，如何让自己的应用，跟随着系统的模式进行动态切换呢？目前系统给我们提供了两种方式可以实现，一种是资源形式，一种是动态的代码形式。")
        .fontSize(16)
        .fontColor(this.descColor)
        .margin({ top: 20 })
    }
    .backgroundColor(this.bgColor)
    .width("100%")
    .height("100%")
    .padding({ left: 20, right: 20 })
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

可以发现，效果和上面的资源形式是一样的。