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

前言：

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

下面是官方文档的链接：

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.ApplicationContext
    if (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()中存储ColorMode

onCreate(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.');
    });

  }
.......
}