HarmonyOS Next开发学习手册——主题设置(应用深浅色适配) ...

概述

当前体系存在深浅色两种体现模式，为了给用户更好的利用体验，应用应适配深浅色模式。从应用与体系设置关联的角度来看，适配深浅色模式可以分为下面两种情况：

• 应用跟随体系的深浅色模式
  
• 应用主动设置深浅色模式
  

应用跟随体系的深浅色模式

• 颜色适配
  
  
  
  • 自定义资源实现
    resources目次下增长深色模式限定词目次（命名为dark）并新建color.json文件，可体现深色模式颜色资源的设置。
    
  
  

**图1 **resources目次结构表示

比方，开发者可在这两个color.json中定义同名配色定义并赋予不同的色值。
base/element/color.json文件：

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

复制代码

dark/element/color.json文件：

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

复制代码

• 通过体系资源实现
  

开发者可直接利用的 体系预置资源 ，即分层参数，同一资源ID在装备类型、深浅色等不同设置下有不同的取值。通过利用体系资源，不同的开发者可以开发出具有雷同视觉风格的应用，不必要自定义2份颜色资源，在深浅色模式下也会主动切换成不同的颜色值。比方，开发者可调用体系资源中的文本主要配色来定义应用内文本颜色。

1. Text('使用系统定义配色')
2.   .fontColor($r('sys.color.ohos_id_color_text_primary'))

复制代码

• 图片资源适配
  

采用资源限定词目次的方式。参照颜色适配的方法，必要将深色模式下对应的同名图片放到 dark/media 目次下，再通过$r的方式加载图片资源的key值，体系做深浅色模式切换时，会主动加载对应资源文件中的value值。
对于 SVG 格式的一些简单图标，可以利用 fillColor 属性配合体系资源改变图片的绘制颜色。不通过两套图片资源的方式，也可以实现深浅色模式适配。

1. Image($r('app.media.pic_svg'))
2.   .width(50)
3.   .fillColor($r('sys.color.ohos_id_color_text_primary'))

复制代码

• Web组件适配
  

Web组件支持对前端页面举行深色模式设置，可参考 Web组件深色模式 举行相干设置。

• 应用监听深浅色模式切换变乱
  应用可以主动监听体系深浅色模式厘革，举行其他类型的资源初始化等自定义逻辑。无论应用是否跟随体系深浅色模式厘革，该监听方式均可见效。
  

• 在 AbilityStage 的 onCreate() 生命周期中获取APP当前的颜色模式并生存到 AppStorage。
  

1. onCreate(): void {
2.   hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
3.   AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
4. }

复制代码

• 在 AbilityStage 的 onConfigurationUpdate() 生命周期中获取最新变动的颜色模式并刷新到 AppStorage。
  

1. onConfigurationUpdate(newConfig: Configuration): void {
2.   AppStorage.setOrCreate('currentColorMode', newConfig.colorMode);
3.   hilog.info(0x0000, 'testTag', 'the newConfig.colorMode is %{public}s', JSON.stringify(AppStorage.get('currentColorMode')) ?? '');
4. }

复制代码

• 在Page中通过 @StorageProp + @Watch 方式获取当前最新颜色并监听装备深色模式厘革。
  

1. @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

复制代码

• 在 aboutToAppear 初始化函数中根据当前最新颜色模式刷新状态变量。
  

1. aboutToAppear(): void {
2.   if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
3.     //当前为浅色模式，资源初始化逻辑
4.   }else {
5.     //当前为深色模式，资源初始化逻辑
6.   }
7. }

复制代码

• 在 @Watch 回调函数中实验同样的适配逻辑。
  

1. onColorModeChange(): void {
2.   if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
3.     //当前为浅色模式，资源初始化逻辑
4.   }else {
5.     //当前为深色模式，资源初始化逻辑
6.   }
7. }

复制代码

应用主动设置深浅色模式

应用默认设置为跟随体系切换深浅色模式，如不希望应用跟随体系深浅色模式厘革，可主动设置应用的深浅色风格。设置后，应用的深浅色模式固定，不会随体系改变。

1. onCreate(): void {
2.   hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
3.   this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
4. }

复制代码

体系默认判定规则

• 如果应用调用上述setColorMode接口主动设置了深浅色，则以接口效果优先。
  
• 应用没有调用setColorMode接口时：
  
  
  
  • 如果应用工程dark目次下有深色资源，则体系内置组件在深色模式下会主动切换成为深色。
    
  • 如果应用工程dark目次下没有任何深色资源，则体系内置组件在深色模式下仍会保持浅色体验。
    
  
  

如果应用全部都是由体系内置组件/体系颜色开发，且想要跟随体系切换深浅色模式时，请参考以下示例修改代码来保证应用体验。

1. onCreate(): void {
2.   this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
3. }

复制代码

鸿蒙全栈开发全新学习指南

有很多小同伴不知道学习哪些鸿蒙开发技能？不知道必要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，终极浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技能的学习路线，包含了鸿蒙开发必掌握的焦点知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、体系定制移植等等）鸿蒙（HarmonyOS NEXT）技能知识点。
本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技能

第四阶段：全网首发-工业级南向装备开发就业技能：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.根本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.设置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共变乱与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.背景任务(Background Task)管理
11.装备管理
12.装备利用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发口试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在末了

• 如果你觉得这篇内容对你还蛮有资助，我想邀请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  
• 关注小编，同时可以期待后续文章ing