HarmonyOS鸿蒙Next中RichEditor setTypingStyle预置文本样式后，切换深浅色模式，文本颜色未跟随深浅色模式变换

HarmonyOS鸿蒙Next中RichEditor setTypingStyle预置文本样式后，切换深浅色模式，文本颜色未跟随深浅色模式变换

使用如下demo，设置一个正常的输入内容的normalStyle文本颜色，一个按钮设置另外一个atUserStyle颜色添加内容。 当点击按钮插入文本内容后，软键盘输入文本内容，在切换深色模式时，软键盘输入的文本内容不会跟随深浅色模式变化。：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  richEditorController: RichEditorController = new RichEditorController()
  normalStyle: RichEditorTextStyle = {
    fontColor: $r('sys.color.font_primary'),
    fontSize: $r('sys.float.Body_L')
  }
  atUserStyle: RichEditorTextStyle = {
    fontColor: $r('sys.color.font_emphasize'),
    fontSize: $r('sys.float.Body_L')
  }

  build() {
    Column() {
      RichEditor({controller: this.richEditorController})
        .onReady(() => {
          this.richEditorController.setTypingStyle(this.normalStyle)
        })
        .width('80%')
        .height('50%')
        .border({
          width: 1,
          color: Color.Black
        })
        .backgroundColor($r('sys.color.ohos_id_color_sub_background'))

      Button('@')
        .onClick(() => {
          this.richEditorController.addTextSpan('@张三', {
            style: this.atUserStyle
          })
        })
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中RichEditor setTypingStyle预置文本样式后，切换深浅色模式，文本颜色未跟随深浅色模式变换的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

历史版本确实setTypingStyle后，键盘输入文本颜色未在深浅色切换时跟随的问题。

新版本已修复，可以使用最新版本尝试。

更多关于HarmonyOS鸿蒙Next中RichEditor setTypingStyle预置文本样式后，切换深浅色模式，文本颜色未跟随深浅色模式变换的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，RichEditor的setTypingStyle方法用于设置文本样式，但预置的文本样式可能未自动适配深浅色模式。这是因为预置样式中的颜色值可能是固定的，未使用系统提供的动态颜色资源。要解决此问题，需在设置文本样式时使用系统动态颜色资源，如ohos:attr/colorPrimary，以确保文本颜色能随深浅色模式自动切换。

这是一个典型的动态主题适配问题。在HarmonyOS Next中，RichEditor的文本颜色不会自动响应系统主题变化，因为setTypingStyle设置的样式是静态的。

解决方案是监听主题变化并重新设置样式：

  1. 添加主题状态监听：
@State currentTheme: Resource = $r('sys.color.font_primary')

aboutToAppear() {
  themeManager.on('colorModeChange', (newMode) => {
    this.currentTheme = newMode === 'dark' ? 
      $r('sys.color.font_primary_dark') : 
      $r('sys.color.font_primary')
    this.updateEditorStyle()
  })
}

updateEditorStyle() {
  this.normalStyle.fontColor = this.currentTheme
  this.richEditorController.setTypingStyle(this.normalStyle)
}
  1. 修改样式定义使用动态颜色：
normalStyle: RichEditorTextStyle = {
  fontColor: this.currentTheme,
  fontSize: $r('sys.float.Body_L')
}

这样当主题切换时，文本颜色会自动更新。对于已插入的文本，可能需要遍历内容重新应用样式。

回到顶部