应用如何切换夜间模式

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
相关问题
关于切换深色模式应用自动重启应用
5266浏览 • 2回复 待解决
app适配深色浅色切换模式
513浏览 • 1回复 待解决
应用如何适配深色模式
188浏览 • 1回复 待解决
应用如何适配深色模式
514浏览 • 1回复 待解决
应用如何适配大显示模式
612浏览 • 1回复 待解决
Component如何监听应用前后台切换
558浏览 • 1回复 待解决
如何支持全局主题切换
389浏览 • 1回复 待解决
应用开发中的预览器换成手表模式
8572浏览 • 2回复 待解决
android 应用深色模式在鸿蒙os上有异常
7776浏览 • 1回复 待解决
有监听应用前后台状态切换的api吗
434浏览 • 1回复 待解决
HSP如何感知前后台切换
658浏览 • 1回复 待解决
求助ETS如何多语言切换
2094浏览 • 1回复 待解决
求大佬告知如何切换横竖屏
714浏览 • 1回复 待解决
stagemode 模式如何获取version信息?
810浏览 • 0回复 待解决
如何禁止Tabs的系统切换逻辑
589浏览 • 0回复 待解决
如何进行页面横竖屏切换
710浏览 • 1回复 待解决
鸿蒙tablist 如何通过滑动切换页面?
5211浏览 • 1回复 待解决
如何监听设备横竖屏切换状态呢
503浏览 • 1回复 待解决
鸿蒙JS 框架中如何主动切换横竖屏?
3481浏览 • 1回复 待解决