鸿蒙：深色模式适配和浅色模式的切换

前言：

有些时候我们需要对应用进行深色模式的适配处理，并且在不需要的时候切换到浅色状态，下面和大家一起照着官方文档来学习。

下面是官方文档的链接：

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714这里就不多说了，直接上效果图和封装好的代码：

代码如下：

1、ColorModeManager.ets

import { window } from "@kit.ArkUI";
import { common, ConfigurationConstant } from "@kit.AbilityKit";export class ColorModeManager {windowObj: window.Window | null = null;currentColorMode: () => ConfigurationConstant.ColorMode;// 构造函数接收window对象作为参数constructor(windowObj: window.Window, currentColorMode: () => ConfigurationConstant.ColorMode) {this.windowObj = windowObj;this.currentColorMode = currentColorMode;}// 状态栏颜色切换changeTabsColor(): void {const colorValues = Object.values(Colors);const randomIndex = Math.floor(Math.random() * colorValues.length);// 随机颜色this.windowObj?.setWindowSystemBarProperties({statusBarContentColor: colorValues[randomIndex]})}// 颜色模式切换changeColorMode() {// 每次调用时通过回调获取最新值const currentMode = this.currentColorMode();let applicationContext = AppStorage.get('applicationContext') as common.ApplicationContextif (currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);} else {applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);}}
}enum Colors {// 基础色Red = "#FF0000",Green = "#00FF00",Blue = "#0000FF",// 扩展色Yellow = "#FFFF00",Purple = "#800080",Orange = "#FFA500",Pink = "#FFC0CB",Cyan = "#00FFFF",Brown = "#A52A2A",Gray = "#808080"
}

2、Index.ets

import { ConfigurationConstant } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { ColorModeManager } from './ColorModeManager';@Entry
@Component
struct Index {colorModeManager: ColorModeManager | undefined = undefined;aboutToAppear(): void {window.getLastWindow(this.getUIContext().getHostContext(), (err: BusinessError, data) => {const colorModeManager =new ColorModeManager(data, () => AppStorage.get("currentColorMode") as ConfigurationConstant.ColorMode)this.colorModeManager = colorModeManager})}build() {Column({ space: 20 }) {Button("切换颜色模式").onClick(() => {this.colorModeManager?.changeColorMode()})Button("切换状态栏颜色").onClick(() => {this.colorModeManager?.changeTabsColor()})Column({ space: 20 }) {Text("··文本颜色适配展示··").fontColor(this.colorModeManager?.currentColorMode() == ConfigurationConstant.ColorMode.COLOR_MODE_DARK ?Color.White :Color.Black).fontWeight(FontWeight.Bold).fontSize(22)Text("后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。").fontColor(this.colorModeManager?.currentColorMode() == ConfigurationConstant.ColorMode.COLOR_MODE_DARK ?Color.White :Color.Black)Text("文本在组件区域显示效果与字体资源相关，默认字体排印可见字体排印视觉指引。").fontColor(this.colorModeManager?.currentColorMode() == ConfigurationConstant.ColorMode.COLOR_MODE_DARK ?Color.White :Color.Black)}.width("80%")}.justifyContent(FlexAlign.Center).height('100%').width('100%')}
}

以上是个人经验分享

···················！！！补充缺少的代码！！！················

3、EntryAbility.ets

export default class EntryAbility extends UIAbility {// 1、添加这个方法onConfigurationUpdate(newConfig: Configuration): void {const currentColorMode: ConfigurationConstant.ColorMode | undefined = AppStorage.get('currentColorMode');if (currentColorMode !== newConfig.colorMode) {AppStorage.setOrCreate<ConfigurationConstant.ColorMode>('currentColorMode', newConfig.colorMode);}}// 2、在onCreate()中存储ColorModeonCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {AppStorage.setOrCreate<ConfigurationConstant.ColorMode>('currentColorMode', this.context.config.colorMode);hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');}// 3、在 windowStage.loadContent中存储applicationContext onWindowStageCreate(windowStage: window.WindowStage): void {hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent('pages/Index', (err) => {// 代码如下   ·······················  ··let applicationContext = this.context.getApplicationContext();AppStorage.setOrCreate('applicationContext', applicationContext)// 代码如上   ·······················  ··if (err.code) {hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));return;}hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');});}
.......
}