应用如何切换夜间模式

OpenHarmony设置深浅色模式指导

场景

应用设置夜间模式。

HarmonyOS
2024-06-11 20:55:26
浏览
收藏 0
回答 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'))//不同模式下,不同背景色 
  } 
}

效果图


分享
微博
QQ
微信
回复
2024-06-12 22:49:09
相关问题
关于切换深色模式应用自动重启应用
6400浏览 • 2回复 待解决
app适配深色浅色切换模式
1840浏览 • 1回复 待解决
HarmonyOS 组件切换深色模式不生效
339浏览 • 1回复 待解决
应用如何适配深色模式
2243浏览 • 1回复 待解决
应用如何适配深色模式
922浏览 • 1回复 待解决
应用如何适配大显示模式
1916浏览 • 1回复 待解决
Component如何监听应用前后台切换
1116浏览 • 1回复 待解决
应用内黑白主题的切换
311浏览 • 1回复 待解决
HarmonyOS应用前后台状态切换事件监听
530浏览 • 1回复 待解决
应用开发中的预览器换成手表模式
10031浏览 • 2回复 待解决