HarmonyOS 鸿蒙Next沉浸光感自定义APP内部深色模式怎么适配

HarmonyOS 鸿蒙Next沉浸光感自定义APP内部深色模式怎么适配 APP内部自定义深色模式，沉浸光感的颜色在哪里对应的代码进行同步呢在哪里加if语句或者三目运算符。下面图片是APP开启深色模式但是系统是浅色模式，另一对反之


更多关于HarmonyOS 鸿蒙Next沉浸光感自定义APP内部深色模式怎么适配的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

看一下沉浸光感的官方文档示例，在底部的图标，带color的配置，改成r引用。

可以参考我的实战文章：

适配深色模式颜色篇

沉浸光感适配保姆级教程

沉浸光感适配保姆级教程

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


感谢感谢，明白了。原来颜色可以在两个地方进去布局，我一直写在page里面好乱，

不客气的🥰，

哈，你是不是把tabbar图片的颜色弄反了。

资源图片放反了。你深色和浅色的图片对调一下就完美了吧！

没有，就是APP内部自定义深色模式了但是点击没有让这个沉浸光感同步深色模式导致了，但是我不知道在哪里加这个判断语句，

颜色资源都是在color.json资源文件里面配置的啊！

看这里：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation

希望HarmonyOS能继续推出更多实用的功能，满足用户的不同需求。

需要对每个组件做适配：

.linearGradient({
      direction: GradientDirection.RightBottom,
      colors: this.currentColorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? [
        ['#201A2E', 0.0],
        ['#1A1428', 0.4],
        ['#12101E', 1.0]
      ] : [
        ['#E8DEF0', 0.0],
        ['#F5EFFA', 0.4],
        ['#FFFFFF', 1.0]
      ]
    })

Divider()
              .width('100%')
              .height(0.5)
              .color(this.currentColorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? '#2E2838' : '#F0F0F0')
              .margin({ left: 16, right: 16 })

cke_1129.png

cke_2064.png

在 resources/dark/color.json 中定义好深色模式下的背景色和字体色，逻辑判断“设置”页面或“主页”的逻辑层，监听“浅色/深色”按钮的点击

在鸿蒙Next中，自定义APP深色模式适配需使用ArkUI框架的@Theme装饰器或systemTheme API监听系统主题变化。通过@Styles定义浅/深色样式，利用AppStorage或LocalStorage绑定systemTheme变量，在组件内动态切换颜色资源（如#FF000000/#FFFFFFFF）。沉浸光感效果需同时调整backgroundColor和foregroundColor属性，并配合blur参数实现。

在 HarmonyOS Next 中，要适配沉浸光感（状态栏、导航栏颜色）与 APP 内部自定义深色模式同步，需要操作窗口级的系统栏属性。核心是在你切换深/浅模式的逻辑处，调用 window.setWindowSystemBarProperties 同步设置系统栏背景色和图标色（statusBarContentColor、navigationBarContentColor 等）。

适配示例（ArkTS）：

import { window } from '@kit.ArkUI';

// 你的深色模式标志变量，例如 AppStorage 中的 isDarkMode
let isDarkMode: boolean = AppStorage.get<boolean>('isDarkMode') ?? false;

// 同步沉浸光感
async function syncSystemBar() {
  const win = window.getLastWindow(getContext(this));
  const barColor = isDarkMode ? '#1A1A1A' : '#FFFFFF';
  const iconColor = isDarkMode ? '#FFFFFF' : '#000000';

  await win.setWindowSystemBarProperties({
    statusBarColor: barColor,
    statusBarContentColor: iconColor,
    navigationBarColor: barColor,
    navigationBarContentColor: iconColor
  });
}

在哪里加判断：

  • 如果你的深色模式通过 AppStorage 或全局状态管理切换，在切换函数中调用 syncSystemBar。
  • 页面进入 onPageShow 时也调用一次，确保页面恢复时同步。
  • 若使用自定义组件封装的切换按钮，在按钮点击事件中先更新 isDarkMode，再执行 syncSystemBar。

这样无论系统是浅色还是深色，APP 内部切换时都能正确显示沉浸光感颜色。

回到顶部