应用如何切换夜间模式

{ 
  "color": [ 
    { 
      "name": "start_window_background", 
      "value": "#FFFFFF" 
    } 
  ] 
}
1.
2.
3.
4.
5.
6.
7.
8.

{ 
  "color": [ 
    { 
      "name": "start_window_background", 
      "value": "#000000" 
    } 
  ] 
}
1.
2.
3.
4.
5.
6.
7.
8.

import uiAppearance from '@ohos.uiAppearance' 
 
@Entry 
@Component 
struct NightMode { 
  @State message: string = '浅色模式' 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) //获取当前的深色模式配置 
          .fontSize(40) 
          .fontWeight(FontWeight.Bold) 
          .backgroundColor($r('app.color.start_window_background')) 
          .onClick(() => { 
            if (uiAppearance.getDarkMode() == 0) {//获取当前的深色模式配置。 
              //设置系统浅色模式。 
              uiAppearance.setDarkMode(uiAppearance.DarkMode.ALWAYS_LIGHT).then(() => { 
                console.log('Set dark-mode successfully.'); 
                this.message = '浅色模式' 
              }).catch((err) => { 
                console.log(`wangyi Set dark-mode failed, ${err}`); 
              }); 
 
            } else { 
              //设置系统深色模式。 
              uiAppearance.setDarkMode(uiAppearance.DarkMode.ALWAYS_DARK).then(() => { 
                console.log('Set dark-mode successfully.'); 
                this.message='深色模式' 
              }).catch((err) => { 
                console.log(`Set dark-mode failed, ${err}`); 
              }); 
            } 
          }) 
      } 
      .width('100%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor($r('app.color.start_window_background'))//不同模式下，不同背景色 
  } 
}
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.