OpenHarmony验证码怎样换肤

在 OpenHarmony（ArkTS / ArkUI） 中，“验证码换肤”通常指的是修改验证码样式（颜色、背景、字体、边框、主题等），而不是系统级换肤。下面按常见场景给你说明做法。

一、自带验证码组件（如 VerificationCode / 自定义输入框）

OpenHarmony 目前没有官方统一的“验证码组件”，一般是用 TextInput + 自定义逻辑实现。

1️⃣ 通过状态变量换肤（推荐）

@Entry
@Component
struct CodePage {
  @State skin: string = 'light' // light / dark

  build() {
    Column() {
      TextInput({ placeholder: '请输入验证码' })
        .width('80%')
        .height(50)
        .backgroundColor(this.skin === 'light' ? '#FFFFFF' : '#333333')
        .fontColor(this.skin === 'light' ? '#000000' : '#FFFFFF')
        .border({
          width: 1,
          color: this.skin === 'light' ? '#CCCCCC' : '#888888'
        })

      Button('切换皮肤')
        .onClick(() => {
          this.skin = this.skin === 'light' ? 'dark' : 'light'
        })
    }
  }
}

✅ 优点：简单、实时生效

二、图形验证码（Canvas 绘制）换肤

如果是自己画的验证码：

Canvas(this.context)
  .onReady(() => {
    this.context.fillStyle = this.skin === 'light' ? '#000' : '#fff'
    this.context.fillText('1234', 20, 40)
  })

你可以把颜色抽成配置：

const theme = {
  light: { text: '#000', bg: '#fff' },
  dark: { text: '#fff', bg: '#000' }
}

三、使用资源文件换肤（多主题）

1️⃣ 在 resources 中定义

resources/
 ├─ base/
 │   ├─ element/
 │   │   └─ color.json
 ├─ dark/
 │   ├─ element/
 │   │   └─ color.json

color.json

{
  "color": [
    { "name": "code_text", "value": "#000000" }
  ]
}

使用：

.fontColor($r('app.color.code_text'))

系统切换深色模式时自动换肤。

四、全局换肤（App 级）

AppStorage.setOrCreate('skin', 'dark')

组件中读取：

@StorageLink('skin') skin: string

五、常见验证码换肤点总结

如果你说的是 某个具体组件（如第三方验证码库 / 短信验证码 UI），可以告诉我：

• OpenHarmony 版本（3.x / 4.x）
• 使用语言（ArkTS / JS）
• 是图形验证码还是输入框验证码

我可以给你更针对性的代码。