HarmonyOS鸿蒙Next中自定义组件怎么适配深色模式

HarmonyOS鸿蒙Next中自定义组件怎么适配深色模式 我发现新建Page在系统切换成深色模式后，如果没有指定背景色，那么是会跟随系统变化的，那么自定义组件如何适配深色模式呢？

5 回复

适配深色模式，需要把每个组件需要用到颜色的地方提取成color.json里指定的某个name-value，而不要写死成某个颜色值，这样在base/element/color.json里表示的是浅色模式时系统自动调用的颜色，在dark/element/color.json里表示的是深色模式时系统自动调用的颜色，不用写任何代码即可自动切换

更多关于HarmonyOS鸿蒙Next中自定义组件怎么适配深色模式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


cke_321.png

在这两个color.json 定义颜色

参考地址

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714

小伙伴你好，我有对深色模式适配博文讲解，博文内有自定义的讲解，希望能帮到你

https://developer.huawei.com/consumer/cn/blog/topic/03198714969895024

在HarmonyOS鸿蒙Next中，自定义组件适配深色模式需使用资源管理。通过ResourceManager加载不同主题的资源文件，在resources目录下分别创建dark和light子目录存放对应颜色值。在组件代码中调用this.context.resourceManager.getColor方法获取当前模式下的颜色值，系统会根据主题自动切换。布局中使用$r('app.color.xxx')引用资源ID实现动态适配。无需手动监听主题变化，系统自动处理资源切换。

在HarmonyOS Next中，自定义组件适配深色模式可以通过以下方式实现：

  1. 使用资源引用：在组件的布局或样式中，使用资源引用（如 $color:background）代替硬编码颜色值。系统会根据当前主题自动切换对应的颜色资源。

  2. 监听主题变化：通过 Configuration 模块监听系统主题变化，并在回调中更新组件样式。例如：

    import configuration from '[@ohos](/user/ohos).configuration';

configuration.on('themeChange', (themeMode) => {
  // 根据 themeMode 更新组件颜色
});

  3. 自定义资源文件：在 resources 目录下为深色模式定义颜色资源（如 color.json 中设置 dark 模式下的颜色），系统会自动根据主题应用对应资源。

  4. 条件样式设置：在组件代码中动态判断当前主题，并应用不同的样式类或属性。

示例代码片段：

// 获取当前主题
const currentTheme = configuration.getThemeMode();

// 根据主题设置组件背景色
const backgroundColor = currentTheme === ThemeMode.DARK ? '#000000' : '#FFFFFF';

通过以上方法，可以确保自定义组件在深色模式下正确适配。

回到顶部