HarmonyOS 浅色模式与深色模式？

Question

设置了深色模式与浅色模式的文字颜色，但是在选中时，当前页面（图01）和下一页（图02）的文字颜色都没有跟着变化。点击图01的image进入下一页（图02）

Answer 1

参考下面代码，点击文字深色模式、浅色模式可以切换对应的模式

import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
import window from '@ohos.window';

import deviceInfo from '@ohos.deviceInfo';//设备信息
import connection from '@ohos.net.connection';

import promptAction from '@ohos.promptAction';

import '../pages/nextIndex'
import { router } from '@kit.ArkUI';

type ResourceStr = string;

@Entry({ routeName: 'Index' })

@Component
export struct Index {
  // banner
  @State banner: Resource = $r('app.media.fit_for_dark_mode_dark_mode_banner');
  // @StorageProp + @Watch 获取并监听当前颜色模式
  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number| undefined | null = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
  // @Watch回调函数，监听颜色模式刷新状态变量
  onColorModeChange(): void {
    if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
      console.info('深色模式')
      this.banner = $r('app.media.fit_for_dark_mode_dark_mode_banner');
      setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
    } else {
      console.info('浅色模式')
      this.banner = $r('app.media.fit_for_dark_mode_light_mode_banner');
      setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
    }
  }
  // 在自定义组件生命周期aboutToAppear中，根据当前颜色模式刷新banner状态变量，切换不同的图片。
  aboutToAppear(): void {
    const applicationContext = getContext(this).getApplicationContext();
    if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      //当前为浅色模式，资源初始化逻辑
      applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
    }else {
      //当前为深色模式，资源初始化逻辑
      applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
    }
  }
  // 在自定义组件生命周期aboutToDisappear中，重置导航栏的背景色避免影响其它页面的导航栏为红色。
  aboutToDisappear(): void {
    const applicationContext = getContext(this).getApplicationContext();
    applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
    setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
  }
  build() {
    Column() {
      Column() {
        Row() {
          Text('主题模式')
            .fontColor($r('app.color.fit_for_title_bg_color'))
            .margin({ top: 0})
            .textAlign(TextAlign.Center)
            .fontSize(20)
        }
        .width('100%')
        .height(64)
        .borderRadius(5)
      }
      .padding({ left: 12, right:12 })
      .backgroundColor("#F2F2F2")
      .width('100%')
        .height(64)

      Column() {
        Image(this.banner)
          .width(200)
          .height(80)
          .borderRadius(20)
          .onClick(() => {
            // 点击
            router.pushNamedRoute({ name: "nextIndex" });
          })
      }

      Column({ space: 1 }) {

        Row(){
          Text('自动跟随系统')
            .margin({ left:20 })

          Radio({ value: 'Radio1', group: 'radioGroup' })

            .checked(true)
            .height(30)
            .width(30)
            .margin({ right:20 })
            .onChange((isChecked: boolean) => {
              if (isChecked) {
                console.log('111')
                this.currentMode = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
              }
            })
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height(50)
        .backgroundColor($r('app.color.fit_for_backgroundColor'))
        Row(){
          Text('浅色模式')
            .margin({ left:20 })
            .onClick(()=>{
              let context = getContext().getApplicationContext()
              context.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
            })
          Radio({ value: 'Radio1', group: 'radioGroup' })
            .checked(true)
            .height(30)
            .width(30)
            .margin({ right:20 })
            .onChange((isChecked: boolean) => {
              if (isChecked) {
                console.log('222')
                // this.currentMode = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
              }
            })
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height(50)
        .backgroundColor($r('app.color.fit_for_backgroundColor'))

        Row(){
          Text('深色模式')
            .margin({ left:20 })
            .onClick(()=>{
              let context = getContext().getApplicationContext()
              context.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
            })
          Radio({ value: 'Radio1', group: 'radioGroup' })
            .checked(true)
            .height(30)
            .width(30)
            .margin({ right:20 })
            .onChange((isChecked: boolean) => {
              if (isChecked) {
                console.log('222')
                // this.currentMode = ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
              }
            })
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height(50)
        .backgroundColor($r('app.color.fit_for_backgroundColor'))
      }
      .width('100%')
      .margin({ top:20 })

    }
    .backgroundColor('#ffffff')
    .width('100%')
    .height('100%')

  }
}
/**

 根据不同的颜色模式来设置banner图和statusBar的背景色

 */
function setBanner(currentMode: number) {
  if (currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    // 在当前为深色模式中，确保界面美观且颜色统一，设置导航栏的背景色。
    setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
    console.log('000000')
  } else {
    // 在当前为浅色模式中，确保界面美观且颜色统一，设置导航栏的背景色。
    setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    console.log('77777')
  }
}
async function setStatusBar(currentMode: number) {
  // 1.获取应用主窗口。
  const windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
  windowStage.getMainWindow((err, data) => {
    if (err.code) {
      console.log('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      return;
    }
    console.log('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
    let color = '';
    if (currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
      color = '#48AF92';
    } else if (currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      color = '#FFFFFF';
    } else {
      color = '#FA5a3C';
    }
    const sysBarProps: window.SystemBarProperties = {
      statusBarColor: color
    };

    data.setWindowSystemBarProperties(sysBarProps, (err) => {
      if (err.code) {
        console.log('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
        return;
      }
      console.log('Succeeded in setting the system bar properties.');
    });
  })
}