应用如何切换夜间模式

OpenHarmony设置深浅色模式指导

场景

应用设置夜间模式。

HarmonyOS

morning_dxm

2024-06-11 20:55:26

浏览

回答 1

待解决

回答 1

按赞同

按时间

depengli

实现步骤

1.配置深色模式的资源目录，使用分层参数隔离深浅色模式的样式

2.设置系统深色模式

注意：需要系统级签名，并在module.json5中配置"ohos.permission.UPDATE_CONFIGURATION"权限

完整实例代码

resources/base/element/color.json

{ 
  "color": [ 
    { 
      "name": "start_window_background", 
      "value": "#FFFFFF" 
    } 
  ] 
}

resources/dark/element/color.json

{ 
  "color": [ 
    { 
      "name": "start_window_background", 
      "value": "#000000" 
    } 
  ] 
}

ets:

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'))//不同模式下，不同背景色 
  } 
}

效果图