HarmonyOS 浅色模式与深色模式

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

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.');
    });
  })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.