Harmonyos之深浅模式适配

原创

已于 2024-12-12 10:11:34 修改 · 1.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos

于 2024-12-12 10:11:18 首次发布

Harmonyos之换肤功能

概述
实现原理
颜色适配

概述

深色模式（Dark Mode）又称之为暗色模式，是与日常应用使用过程中的浅色模式（Light Mode）相对应的一种UI主题。

换肤功能应该是现在APP常见的一个功能，现在我们来了解下载Harmonyos上app是如何实现换肤功能的。

实现原理

当系统切换到深色模式后，应用内可能会出现部分内容切换到深色主题的情况，例如状态栏、弹窗背景色、系统控件等，会导致应用内页面效果错乱。

为应对上述情况，需要对应用进行深色模式下的内容适配，目前该适配主要依靠资源目录。当系统对应的设置项发生变化后（如系统语言、深浅色模式等），应用会自动加载对应资源目录下的资源文件。

创建的项目默认是支持浅色模式的，资源一般都放在src/main/resources/base目录下的，如下图：
在这里插入图片描述
但是系统为深色模式预留了dark目录，该目录在应用创建时默认不存在，在进行深色模式适配时，需要开发者在src/main/resources中手动地创建出dark目录，将深色模式所需的资源放置到该目录下。

说明
在进行资源定义时，需要在base目录与dark目录中定义同名的资源。例如在base/element/color.json文件中定义text_color为黑色，在dark/element/color.json文件中定义text_color为白色，那么当深浅色切换时，应用内使用了$('app.color.text_color ')作为颜色值的元素会自动切换到对应的颜色，而无需使用其他逻辑判断进行控制。

颜色适配

颜色资源配置

对于颜色资源的适配，目前有两种方式：

使用系统资源，当系统切换模式时，使用受支持的系统资源会自动适配深浅模式。开发人员可以查看支持的系统资源
使用自定义的主题，那么就需要配置不同主题的颜色资源。

这里以配置自定义主题来适配颜色：

配置浅色模式的颜色资源，配置目录src/main/resources/base/element/color.json：

{
   
   
  "color": [
  // 浅色主题的颜色
    {
   
   
      "name": "test_skin",
      "value": "#008000"
    }
  ]
}

配置深色模式，配置目录src/main/resources/dark/element/color.json：

{
   
   
  "color": [
   // 深色主题颜色
    {
   
   
      "name": "test_skin",
      "value": "#FFFF00"
    }
  ]
}

工具类编写

AppSkinManager工具类的编写：

import {
   
    appPreferences } from './AppPreferences'
import {
   
    ConfigurationConstant } from '@kit.AbilityKit';
import {
   
    window } from '@kit.ArkUI';
import {
   
    BusinessError } from '@ohos.base';
import {
   
    JSON } from '@kit.ArkTS';

const TAG = "AppSkinManager"
export enum AppSkinMode {
   
   
  // 未设置  跟随系统
  NOT_SET,

  // 白色
  LIGHT,

  // 黑色