前言
无论是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]) } }
可以发现，效果和上面的资源形式是一样的。
相关总结
无论是资源模式，还是代码模式，都可以实现跟随系统模式的改变而改变，如果，你不想跟着系统改变，有两种方式，第一种方式是正常开发就行，默认就是浅色模式，但是，如果你想默认深色模式，那么就需要进行代码设置了，设置之后，就不会跟着系统的改变而改变了。
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)
