我们在HarmonyOS开发中，如何应用的自定义系统主题设置？

Question

我们在HarmonyOS开发中，如何应用的自定义系统主题设置？

脆脆瓜的笔记

1.6k1211

发布于
2024-12-12 陕西

我们在HarmonyOS开发中，如何应用的自定义系统主题设置？
本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

harmonyos-next

阅读 950

AI BotBETA

在HarmonyOS开发中，应用自定义系统主题设置可以通过以下步骤实现：

一、自定义品牌色和应用级自定义品牌色

对于使用ets声明式前端开发的应用，提供应用内组件的主题能力，支持局部深浅色、动态换肤功能。可以通过CustomTheme用于自定义主题，属性可选，只需要复写修改的部分，未修改内容继承于系统。

自定义品牌色：

import { CustomColors, CustomTheme } from '@kit.ArkUI';

export class AppColors implements CustomColors {
    // 自定义品牌色
    brand: ResourceColor = '#FF75D9';
}

export class AppTheme implements CustomTheme {
    public colors: AppColors = new AppColors();
}

export let gAppTheme: CustomTheme = new AppTheme();

在页面入口处统一设置ThemeControl，需要在页面build前执行：

import { Theme, ThemeControl } from '@kit.ArkUI';
import { gAppTheme } from './AppTheme';

// 在页面build前执行ThemeControl
ThemeControl.setDefaultTheme(gAppTheme);

在页面中应用自定义主题：

@Entry
@Component
struct DisplayPage {
    @State menuItemColor: ResourceColor = $r('sys.color.background_primary');

    onWillApplyTheme(theme: Theme) {
        this.menuItemColor = theme.colors.backgroundPrimary;
    }

    build() {
        // 页面布局和组件
    }
}

二、局部页面自定义主题风格

可以通过在resources目录下增加深色模式限定词目录（命名为dark）并新建color.json文件，以显示深色模式颜色资源的配置。例如，在两个color.json中定义同名配色并赋予不同的色值：

base/element/color.json文件：

{
    "color": [
        {
            "name": "app_title_color",
            "value": "#000000"
        }
    ]
}

dark/element/color.json文件：

{
    "color": [
        {
            "name": "app_title_color",
            "value": "#FFFFFF"
        }
    ]
}

三、应用主动设置深浅色模式

应用可以主动设置深浅色模式，而不是跟随系统切换。例如，在Ability的onCreate方法中设置应用的深浅色风格：

onCreate(): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
}

如果应用调用setColorMode接口主动设置了深浅色，则以接口效果优先。如果应用工程dark目录下有深色资源，则系统内置组件在深色模式下会自动切换成为深色。

四、监听系统深浅色模式变化

应用可以主动监听系统深浅色模式变化，进行其他类型的资源初始化等自定义逻辑。无论应用是否跟随系统深浅色模式变化，该监听方式均可生效。例如，在AbilityStage的onCreate和onConfigurationUpdate生命周期中获取当前和最新变更的颜色模式，并保存到AppStorage中：

onCreate(): void {
    AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
}

onConfigurationUpdate(newConfig: Configuration): void {
    AppStorage.setOrCreate('currentColorMode', newConfig.colorMode);
}

在Page中通过@StorageProp和@Watch方式获取当前最新颜色并监听设备深色模式变化：

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

onColorModeChange(): void {
    if (this.currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
        // 当前为浅色模式, 资源初始化逻辑
    } else {
        // 当前为深色模式, 资源初始化逻辑
    }
}

通过以上步骤，可以在HarmonyOS开发中实现自定义系统主题设置，包括自定义品牌色、局部页面自定义主题风格、应用主动设置深浅色模式以及监听系统深浅色模式变化等功能。

1 个回答

得票最新

以梦为马_HOS

1.2k1117

发布于
1 月 17 日广东

应用的自定义主题设置，目前已有相关的文章可参考。
参考文章：https://developer.huawei.com/consumer/cn/forum/topic/02071573...

撰写回答