鸿蒙Next主题demo如何实现

在鸿蒙Next中实现主题demo时遇到了一些困难，想请教具体实现步骤。目前按照官方文档操作时，发现主题切换效果无法正常显示，不知道是资源文件配置问题还是代码逻辑有遗漏？希望能提供一个完整的demo示例，重点说明如何定义主题资源、绑定控件属性以及动态切换主题的具体实现方法。另外，鸿蒙Next的主题机制和旧版本有什么区别需要注意的吗？

2 回复

鸿蒙Next主题demo？简单！

  1. 创建主题资源：在resources目录下定义颜色、字体等。
  2. 应用主题：在config.json中配置，或代码动态切换。
  3. 适配组件：确保UI组件绑定主题属性，比如Element.TextColor。
  4. 测试：切换明暗模式，看组件是否“秒变脸”！
    记住：别让主题代码比你的发际线还乱！ 😄

更多关于鸿蒙Next主题demo如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


以下是鸿蒙Next主题demo的实现步骤和示例代码：

1. 创建主题资源文件

在 resources/base/element/ 目录下创建 color.json 和 theme.json：

// color.json
{
  "color": {
    "background_primary": "#FFFFFF",
    "text_primary": "#000000"
  }
}

// theme.json
{
  "dark": {
    "color": {
      "background_primary": "#000000",
      "text_primary": "#FFFFFF"
    }
  }
}

2. 在布局中引用主题资源

<!-- index.ets -->
@Entry
@Component
struct ThemeDemo {
  build() {
    Column() {
      Text('主题示例')
        .fontSize(20)
        .fontColor($r('app.color.text_primary'))
        .backgroundColor($r('app.color.background_primary'))
    }
    .width('100%')
    .height('100%')
  }
}

3. 动态切换主题

通过 Configuration 模块监听系统主题变化：

import configuration from '@ohos.configuration';

@Entry
@Component
struct ThemeDemo {
  @State isDarkMode: boolean = false;

  aboutToAppear() {
    // 监听主题变化
    configuration.on('colorModeChange', (data) => {
      this.isDarkMode = data.colorMode === configuration.ColorMode.COLOR_MODE_DARK;
    });
  }

  build() {
    Column() {
      Text(this.isDarkMode ? '深色模式' : '浅色模式')
        .fontColor(this.isDarkMode ? '#FFFFFF' : '#000000')
        .backgroundColor(this.isDarkMode ? '#000000' : '#FFFFFF')
    }
  }
}

4. 自定义主题切换

手动切换主题的完整示例：

import configuration from '@ohos.configuration';

@Entry
@Component
struct ThemeDemo {
  @State currentTheme: Resource = $r('app.color.background_primary');

  // 切换主题
  toggleTheme() {
    const isDark = configuration.getColorMode() === configuration.ColorMode.COLOR_MODE_DARK;
    configuration.setColorMode(isDark ? 
      configuration.ColorMode.COLOR_MODE_LIGHT : 
      configuration.ColorMode.COLOR_MODE_DARK
    );
  }

  build() {
    Column() {
      Button('切换主题')
        .onClick(() => this.toggleTheme())
        .backgroundColor(this.currentTheme)
    }
  }
}

关键说明：

  • 使用 $r('app.color.xxx') 引用资源
  • 通过 configuration 模块管理系统主题
  • 深色/浅色模式资源需在 theme.json 中分别定义

以上代码演示了主题资源定义、引用和动态切换的核心逻辑，实际开发中可根据需求扩展更多样式属性。

回到顶部