HarmonyOS鸿蒙Next 6强调的“一次开发”理念，如何指导应用的主题色和字体大小的跨端自适应？

背景知识：

主题色：

按照官方的要求，展示深色模式可以在 base/ 同级创建 dark/目录来展示深色模式对应的颜色如下：

然后通过全局控制对深色模式进控制：

示例代码：

// AppTheme.ets
import { CustomColors, CustomTheme, ThemeControl, Theme } from '@kit.ArkUI';

// 基础主题颜色（支持深浅色模式自适应）
export class AppBaseColors implements CustomColors {
  brand: ResourceColor = $r('app.color.brand_color');
  warning: ResourceColor = $r('app.color.warning_color');
  backgroundPrimary: ResourceColor = $r('app.color.background_primary');
  fontPrimary: ResourceColor = $r('app.color.font_primary');
}

// 全局主题
export class AppGlobalTheme implements CustomTheme {
  colors: AppBaseColors = new AppBaseColors();
}

// 全局主题实例
export const GlobalTheme = new AppGlobalTheme();

// 在应用启动时设置全局默认主题
ThemeControl.setDefaultTheme(GlobalTheme);


------ 设置深色模式

import { ConfigurationConstant } from '@kit.BasicServicesKit';

// 设置应用为深色模式
this.context.getApplicationContext().setColorMode(
  ConfigurationConstant.ColorMode.COLOR_MODE_DARK
);

// 设置为浅色模式
this.context.getApplicationContext().setColorMode(
  ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT
);

// 跟随系统模式
this.context.getApplicationContext().setColorMode(
  ConfigurationConstant.ColorMode.COLOR_MODE_FOLLOW_SYSTEM
);

字体大小：

1、HarmonyOS 使用 fp 作为字体专用单位，具有以下特性：

2、所以可以在：base/profile/configuration.json配置：

{
  "configuration": {
    "fontSizeScale": "followSystem",  // 开启跟随系统字体缩放
    "fontSizeMaxScale": "3.2"         // 最大缩放倍数限制
  }
}

3、设备差异化字体大小：

针对不同设备类型（手机、平板、智慧屏），使用断点系统实现差异化字体大小：

示例代码：

// BreakpointSystem.ets
@ObservedV2
class BreakpointState {
  @Trace currentBreakpoint: string = 'sm'; // xs/sm/md/lg/xl
}

// 断点类型映射工具
export class BreakpointType<T> {
  private options: { xs?: T; sm?: T; md?: T; lg?: T; xl?: T };
  
  constructor(options: { xs?: T; sm?: T; md?: T; lg?: T; xl?: T }) {
    this.options = options;
  }
  
  getValue(breakpoint: string): T | undefined {
    if (breakpoint === 'xs') return this.options.xs;
    if (breakpoint === 'sm') return this.options.sm;
    if (breakpoint === 'md') return this.options.md;
    if (breakpoint === 'lg') return this.options.lg;
    if (breakpoint === 'xl') return this.options.xl;
    return undefined;
  }
}

智慧屏字体放大例子：

@Component
export struct AdaptiveTextPage {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';

  build() {
    Column() {
      // 标题文本：智慧屏（lg）上字体放大
      Text('智慧屏大字体标题')
        .fontSize(
          new BreakpointType({
            xs: 18,  // 穿戴设备
            sm: 20,  // 手机
            md: 24,  // 平板竖屏
            lg: 32,  // 智慧屏/平板横屏（放大）
            xl: 36   // 超大屏设备
          }).getValue(this.currentBreakpoint) || 20
        )
        .fontWeight(FontWeight.Bold)

      // 正文文本：智慧屏上同样放大
      Text('这是一段正文内容，在智慧屏上会自动放大字体以提升阅读体验。')
        .fontSize(
          new BreakpointType({
            xs: 12,
            sm: 14,
            md: 16,
            lg: 20,  // 智慧屏放大
            xl: 22
          }).getValue(this.currentBreakpoint) || 14
        )
    }
    .width('100%')
    .padding(20)
  }
}