#HarmonyOS NEXT体验官#深色模式的适配原创

鸿蒙小白001

发布于 2024-8-21 17:48

浏览

0收藏

当我们开发完app后，满心欢喜以为自己开发完了。但是从设置里将浅色模式改为深色模式后再进入自己的app，发现一切都变了。所以深色模式也是需要适配的。

#HarmonyOS NEXT体验官#深色模式的适配-鸿蒙开发者社区

浅色模式

#HarmonyOS NEXT体验官#深色模式的适配-鸿蒙开发者社区

深色模式

深色模式简单理解就是以前深色的字体，现在要改成浅色字体了。

简单粗暴的解决方式

app不跟随系统的模式，那么初始化的时候，直接主动给app设置浅色模式。

  onWindowStageCreate(windowStage: window.WindowStage): void {
  
		//设置浅色模式
    
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)

  }1.
2.
3.
4.
5.
6.
7.

但如果想要体验好一点，跟随系统的模式，就稍微复杂一点了。

颜色适配，自定义两套颜色资源（resources/dark/element/color.json和resources/base/element/color.json），通过$r的方式加载颜色资源的key值。

#HarmonyOS NEXT体验官#深色模式的适配-鸿蒙开发者社区

//base/elememt/color.json 下的common_text色值
{
      "name": "common_text",
      "value": "#333333"
      
  }1.
2.
3.
4.
5.
6.

//dark/element/color.json 下的common_text色值
{
      "name": "common_text",
      "value": "#FFFFFF"
      
 }1.
2.
3.
4.
5.
6.

系统资源的使用

此种写法，需要我们程序员自己来维护两套资源。当然如果不想维护，可以使用系统资源。开发者直接使用系统预置的资源定义（即分层参数，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。也就是系统已经做好了适配，我们拿过来就用，不用管他在何种设备、何种模式。

预置资源查看：

https://gitee.com/openharmony/resources/tree/master/systemres/main/resources

这是系统帮我们做的深色适配的方案。如果我们想更个性化定制自己的UI，也可以自己根据当前模式来做不同的逻辑。

首先适配深色模式，我们需要知道当前系统到底是哪种模式？其次，在系统切换模式后，app如何立即知道并作出相应的反应。

获取当前系统的深浅模式：

 import { common, ConfigurationConstant } from '@kit.AbilityKit';
@Entry
@Component
struct Index {

  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
  aboutToAppear(): void {
  
    let mode = this.context.config.colorMode
    if (mode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    
      //深色模式
    } else {
    
      //浅色模式
    }
  }
   build() {
   
   }
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

监听深浅模式的实时变化：

EntryAbility.ets下监听

 onWindowStageCreate(windowStage: window.WindowStage): void {

    //添加订阅
    this.context.getApplicationContext().on('environment',this.envCallback);

    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

  /**
   * 切换模式后的回调
   */
  envCallback: EnvironmentCallback = {
    onConfigurationUpdated(config) {
      console.info(`envCallback onConfigurationUpdated success: ${JSON.stringify(config)}`);
      let mode = config.colorMode;
      if (mode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
 						 emitter.emit("colorModeChange")//发送消息模式改变
        //深色模式
      } else {
        //浅色模式
      }
    },
    onMemoryLevel(level){
      console.log(`onMemoryLevel level: ${JSON.stringify(level)}`);
    }
  };1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

 import { common, ConfigurationConstant } from '@kit.AbilityKit';
@Entry
@Component
struct Index {

  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
  aboutToAppear(): void {
  
    let mode = this.context.config.colorMode
    if (mode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    
      //深色模式
    } else {
    
      //浅色模式
    }
     emitter.on("colorModeChange", () => {
      //模式发生变化，UI做出相应变化
      
    })
  }
   build() {
   
   }
  }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.

另外一种获取深浅色模式的方法

Environment.envProp("colorMode",ColorMode.DARK)// 将设备的显示模式存入AppStorage

@Entry
@Component
struct Index {

  @StorageProp("colorMode") mode:ColorMode = ColorMode.DARK//通过@StorageProp获取到当前手机的显示模式

aboutToAppear(): void {
    if (this.mode==ColorMode.DARK) {
    
      //深色模式

    }else {
    
      //浅色模式

    }
  }

  build() {
    Column() {
    
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}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.

另外一种深浅模式监听方法（媒体查询）

import mediaQuery from '@ohos.mediaquery'
@Entry
@Component
struct Index {
  listener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync('(dark-mode: true)');

  aboutToAppear(): void {
    // 绑定回调函数
    
    this.listener.on('change', (mediaQueryResult: mediaQuery.MediaQueryResult) => {
    
      if (mediaQueryResult.matches) {
      
        //深色模式
      }else{
      
        //浅色模式
      }
    });
  }

  build() {
    Column() {
    
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}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.