设置应用内主题换肤
=========

#### 概述

对于采用ArkTS开发的应用，提供了应用内组件的主题换肤功能，支持局部的深浅色切换及动态换肤。目前，该功能只支持设置应用内主题换肤，暂不支持在UIAbility或窗口层面进行主题设置，同时也不支持C-API和Node-API。

#### 自定义主题色

当应用需要使用换肤功能时，应自定义主题颜色。[CustomTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-theme#customtheme)用于自定义主题色的内容，其属性可选，仅需对需要修改的token字段赋值，其余token将继承系统默认颜色值，可参考[系统默认的token颜色值](#系统缺省token色值)。请参照以下示例自定义主题色：

import { CustomColors, CustomTheme } from '@kit.ArkUI';

export class AppColors implements CustomColors {
  // 自定义主题色
  public brand: ResourceColor = '#FF75D9';
  // 使用$r，让一级警示色在深色和浅色模式下，设置为不同的颜色
  public warning: ResourceColor = $r('sys.color.ohos\_id\_color\_warning');
}

export class AppTheme implements CustomTheme {
  public colors: AppColors = new AppColors();
}

export let gAppTheme: CustomTheme = new AppTheme();

#### 设置应用内组件自定义主题色

*   若在页面入口处设置应用内组件自定义主题色，需确保在页面build前执行[ThemeControl](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-theme#themecontrol).[setDefaultTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-theme#setdefaulttheme)。
    
    示例代码中，[onWillApplyTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-custom-component-lifecycle#onwillapplytheme12)回调函数用于使自定义组件获取当前生效的Theme对象。
    
    // Index.ets
    import { Theme, ThemeControl } from '@kit.ArkUI';
    import { gAppTheme } from './AppTheme';
    
    //在页面build前执行ThemeControl
    ThemeControl.setDefaultTheme(gAppTheme);
    
    @Entry
    @Component
    struct DisplayPage {
      @State menuItemColor: ResourceColor = $r('sys.color.background\_primary');
    
      onWillApplyTheme(theme: Theme) {
        this.menuItemColor = theme.colors.backgroundPrimary;
      }
    
      build() {
        Column() {
          List({ space: 10 }) {
            ListItem() {
              Column({ space: '5vp' }) {
                Text('Color mode')
                  .margin({ top: '5vp', left: '14fp' })
                  .width('100%')
                Row() {
                  Column() {
                    Text('Light')
                      .fontSize('16fp')
                      .textAlign(TextAlign.Start)
                      .alignSelf(ItemAlign.Center)
                    Radio({ group: 'light or dark', value: 'light' })
                      .checked(true)
                  }
                  .width('50%')
    
                  Column() {
                    Text('Dark')
                      .fontSize('16fp')
                      .textAlign(TextAlign.Start)
                      .alignSelf(ItemAlign.Center)
                    Radio({ group: 'light or dark', value: 'dark' })
                  }
                  .width('50%')
                }
              }
              .width('100%')
              .height('90vp')
              .borderRadius('10vp')
              .backgroundColor(this.menuItemColor)
            }
    
            ListItem() {
              Column() {
                Text('Brightness')
                  .width('100%')
                  .margin({ top: '5vp', left: '14fp' })
                Slider({ value: 40, max: 100 })
              }
              .width('100%')
              .height('70vp')
              .borderRadius('10vp')
              .backgroundColor(this.menuItemColor)
            }
    
            ListItem() {
              Column() {
                Row() {
                  Column({ space: '5vp' }) {
                    Text('Touch sensitivity')
                      .fontSize('16fp')
                      .textAlign(TextAlign.Start)
                      .width('100%')
                    Text('Increase the touch sensitivity of your screen' +
                      ' for use with screen protectors')
                      .fontSize('12fp')
                      .fontColor(Color.Blue)
                      .textAlign(TextAlign.Start)
                      .width('100%')
                  }
                  .alignSelf(ItemAlign.Center)
                  .margin({ left: '14fp' })
                  .width('75%')
    
                  Toggle({ type: ToggleType.Switch, isOn: true })
                    .margin({ right: '14fp' })
                    .alignSelf(ItemAlign.Center)
                }
                .width('100%')
                .height('80vp')
              }
              .width('100%')
              .borderRadius('10vp')
              .backgroundColor(this.menuItemColor)
            }
            ListItem() {
              Column() {
                Text('Warning')
                  .width('100%')
                  .margin({ top: '5vp', left: '14fp' })
                Button('Text')
                  .type(ButtonType.Capsule)
                  .role(ButtonRole.ERROR)
                  .width('40%')
              }
              .width('100%')
              .height('70vp')
              .borderRadius('10vp')
              .backgroundColor(this.menuItemColor)
            }
          }
        }
        .padding('10vp')
        .backgroundColor('#dcdcdc')
        .width('100%')
        .height('100%')
      }
    }
    
*   若在UIAbility中设置应用内组件自定义主题色，需在onWindowStageCreate()方法的windowStage.[loadContent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#loadcontent9)的完成时回调中调用[ThemeControl](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-theme#themecontrol).[setDefaultTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-theme#setdefaulttheme)，设置应用内组件的自定义主题色。
    
    // EntryAbility.ets
    import {AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
    import { hilog } from '@kit.PerformanceAnalysisKit';
    import { window, CustomColors, ThemeControl } from '@kit.ArkUI';
    
    class AppColors implements CustomColors {
      fontPrimary = 0xFFD53032;
      iconOnPrimary = 0xFFD53032;
      iconFourth = 0xFFD53032;
    }
    
    const abilityThemeColors = new AppColors();
    
    export default class EntryAbility extends UIAbility {
      onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
      }
    
      onDestroy() {
        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
      }
    
      onWindowStageCreate(windowStage: window.WindowStage) {
        // Main window is created, set main page for this ability
        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    
        windowStage.loadContent('pages/Index', (err, data) => {
          if (err.code) {
            hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
            return;
          }
          hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
          // 在onWindowStageCreate()方法中setDefaultTheme
          ThemeControl.setDefaultTheme({ colors: abilityThemeColors });
          hilog.info(0x0000, 'testTag', '%{public}s', 'ThemeControl.setDefaultTheme done');
        });
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2c/v3/bS7VbCDrS3eNnyxGAKMuIA/zh-cn_image_0000002625107749.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=69CD9470067AA3415BB3719C15335C7E8965F476BB0875E27F62A662B1DD7FF5)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e5/v3/u2y-g5riTIuU3687vs-L5Q/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=4B3B299CF9BA3F17E7CCB004B5A195798CA0F757D10FCDE13C69DD3D983D3365)
    
    *   当setDefaultTheme的参数为undefined时，会清除先前设置的自定义主题，默认token值对应的色值参考[系统缺省token色值](#系统缺省token色值)。
        
    *   setDefaultTheme需要在ArkUI初始化后即windowStage.loadContent的完成时回调中使用。
        
    

#### 设置应用局部页面自定义主题风格

通过设置[WithTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-with-theme)，将自定义主题Theme的配色应用于内部组件的默认样式。在WithTheme的作用范围内，组件的配色会根据Theme的配色进行调整。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/51/v3/Vcu5axjOSeO8kFk_LXx4aw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=0215ABA5CDC34E89A10C5DCD6CC6F5CDCACD27BA0C40BF2903456B11F745FC68)

在自定义节点[BuilderNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-buildernode)中使用[WithTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-with-theme)，为了确保显示效果正确，需手动传递系统环境变化事件，触发节点的全量更新，详细请参考[BuilderNode系统环境变化更新](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-buildernode#updateconfiguration12)。

如示例所示，使用WithTheme({ theme: this.CustomTheme })可将作用域内组件的配色设置为自定义主题风格。后续可以通过更新this.CustomTheme来更换主题风格。[onWillApplyTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-custom-component-lifecycle#onwillapplytheme12)回调函数用于使自定义组件能够获取当前生效的Theme对象。

import { CustomColors, CustomTheme, Theme } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
//请将$r('app.color.xxx')替换为实际资源文件
class AppColors implements CustomColors {
  public fontPrimary: ResourceColor = $r('app.color.brand\_purple');
  public backgroundEmphasize: ResourceColor = $r('app.color.brand\_purple');
}

class AppColorsSec implements CustomColors {
  public fontPrimary: ResourceColor = $r('app.color.brand');
  public backgroundEmphasize: ResourceColor = $r('app.color.brand');
}

class AppTheme implements CustomTheme {
  public colors: AppColors = new AppColors();
}

class AppThemeSec implements CustomTheme {
  public colors: AppColors = new AppColorsSec();
}

@Entry
@Component
struct DisplayPage1 {
  @State customTheme: CustomTheme = new AppTheme();
  // 请将$r('app.string.SetCustomThemeStyle')替换为实际资源文件，在本示例中该资源文件的value值为"设置应用局部页面自定义主题风格"
  @State message: ResourceStr = $r('app.string.SetCustomThemeStyle');
  count = 0;

  build() {
    WithTheme({ theme: this.customTheme }) {
      Row(){
        Column() {
          Text('WithTheme')
            .fontSize(30)
            .margin({bottom: 10})
          Text(this.message)
            .margin({bottom: 10})
          Button('change theme').onClick(() => {
            this.count++;
            if (this.count > 1) {
              this.count = 0;
            }
            switch (this.count) {
              case 0:
                this.customTheme = new AppTheme();
                break;
              case 1:
                this.customTheme = new AppThemeSec();
                break;
              default:
                break;
            }
          })
        }
        .width('100%')
      }
      .height('100%')
      .width('100%')
    }
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b6/v3/vXksRPk6Rz6Y9gWloft6kg/zh-cn_image_0000002594668232.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B4D211DBB41589D80F3B39BBA60550A09677938A970192B539007FC86D9C444B)

#### 设置应用页面局部深浅色

通过[WithTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-with-theme)可以设置三种颜色模式，跟随系统模式，浅色模式和深色模式。

在WithTheme的作用范围内，组件的样式资源值会根据指定的模式，读取对应的深浅色模式系统和应用资源值。这意味着，在WithTheme作用范围内，组件的配色会根据所指定的深浅模式进行调整。

如下面的示例所示，通过WithTheme({ colorMode: ThemeColorMode.DARK })，可以将作用范围内的组件设置为深色模式。

设置局部深浅色时，需要添加dark.json资源文件，深浅色模式才会生效。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/92/v3/lGBwHJqaRHCjyZglfOmMMQ/zh-cn_image_0000002594828160.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AAE80B807E847F4FDDBDB5C9AFBB4245A59A5FF8DAE126F9B725AD144E731BF4)

dark.json数据示例：

  {
    "color": \[
      {
        "name": "start\_window\_background",
        "value": "#000000"
      }
    \]
  }

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

ThemeControl.setDefaultTheme(undefined);

@Entry
@Component
struct DisplayPage3 {
  @State message: string = 'Hello World';
  @State colorMode: ThemeColorMode = ThemeColorMode.DARK;

  build() {
    WithTheme({ colorMode: this.colorMode }) {
      Row() {
        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          Button('Switch ColorMode').onClick(() => {
            if (this.colorMode === ThemeColorMode.LIGHT) {
              this.colorMode = ThemeColorMode.DARK;
            } else if (this.colorMode === ThemeColorMode.DARK) {
              this.colorMode = ThemeColorMode.LIGHT;
            }
          })
        }
        .width('100%')
      }
      .backgroundColor($r('sys.color.background\_primary'))
      .height('100%')
      // 扩展安全区，实现沉浸式深浅色变更效果
      .expandSafeArea(
        \[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.END, SafeAreaEdge.BOTTOM, SafeAreaEdge.START\])
    }
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/17/v3/E4GhWomjTxWQ9msaOUsvnw/zh-cn_image_0000002625187607.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=7BEE68C8F3B042E32CA0CB09C265C91474CF15962FCE0D2BB63C4B7A6A3A8084)

#### 系统缺省token色值

| Token | 场景类别 | Light | 说明 | Dark | 说明 |
| :-- | :-- | :-- | :-- | :-- | :-- |
| theme.colors.brand | 品牌色 | #ff0a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/dd/v3/0qD2HjZvRma0fzqGJGLKww/zh-cn_image_0000002625107751.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=66706AA1A7CF7B607D0C924A09FDDC694A6457C69E5885DDE6CB26650A69CB84) | #ff317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cb/v3/GZWL8SpDQHWpXxN4Zu_Odw/zh-cn_image_0000002594668234.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=28A50106DA4E26A6C849A761B097536AB0CDB983E557820FC9F51B42245283DD) |
| theme.colors.warning | 一级警示色 | #ffe84026 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/95/v3/tyK4KGKWRvO-NqrEJQTU2Q/zh-cn_image_0000002594828162.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=76E5FE18C372CF91FA1422AEF2C7191A34DF2FAB4B16A4D1CD96F824B72F999E) | #ffd94838 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/79/v3/8NaHnl05SbmJvUvHGCfzUA/zh-cn_image_0000002625187609.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=43D51DD78CD767DA1EBC281CB8C22CE84443BAA16D1B3F16DDE3FD8B58210FBD) |
| theme.colors.alert | 二级警示色 | #ffed6f21 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/22/v3/ck9lScynR667svpNTF25zA/zh-cn_image_0000002625107753.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=BE0EA927F83B9492C72ADF46B8972FD4D480F93C76C9BA75953FC2B46D936BAB) | #ffdb6b42 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/29/v3/dxHHU716RhGrXZAcJD7aLQ/zh-cn_image_0000002594668236.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AAE4D1D01D672A46EACF41A9D171F825F7A84E12D8B9EDB0B1797F2D987A5B35) |
| theme.colors.confirm | 确认色 | #ff64bb5c | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f1/v3/IxmjKLjVRbSawCxYL3M0tw/zh-cn_image_0000002594828164.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=D97E90FC82EB3CBCDB62E9BB69903B3AE7F42CF4A11E52BC0B026257818D36A6) | #ff5be854 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/34/v3/SJmeg2EMSWKaD5VNYn2J5w/zh-cn_image_0000002625187611.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=FCD354F920CE8624B4906EC772306B16D107D8E201AB0EC1C4C03E0F62DDA784) |
| theme.colors.fontPrimary | 一级文本 | #e5000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/17/v3/v2w4GvWtR9eKu7CcJYyqeA/zh-cn_image_0000002625107755.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=80B40D9502EA58471B5707F67B210E9B0580266AD052E3FEBAE6F95D3097E855) | #e5ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8a/v3/h1ey0qnlRf-OJ5sJKYmasg/zh-cn_image_0000002594668238.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=D1ECA02D0D683EBC109D34C09A8FEFB3A69D08D5C2912482ADBC5C34E51FD94F) |
| theme.colors.fontSecondary | 二级文本 | #99000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/aa/v3/y11VZFBxRnWeXgNgMAOHKw/zh-cn_image_0000002594828166.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=830A738D5E7FEF7F5B8E4A16A802EB84489A923BEE65A2C6B63A39A7FB29EDE9) | #99ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/02/v3/wJVD9mtbQkSQwJnzSnFquw/zh-cn_image_0000002625187613.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=819ABFA65514FD87BA6686D5488EECF9E9A67CAEF38202B160F6538F0A9747EE) |
| theme.colors.fontTertiary | 三级文本 | #66000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ef/v3/N2s_aE3FSsWjK9x3xURnTg/zh-cn_image_0000002625107757.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=205F71D3130A178B712DC696D752B4D1FBC9FB71A98D5E818DF88C01D6DAE0E9) | #66ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2d/v3/6f5yBm5dQnmW81pNgn3x2g/zh-cn_image_0000002594668240.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=882B469583D99D60C27C0A413F225B530299C82EC145F600746A504CE433CA02) |
| theme.colors.fontFourth | 四级文本 | #33000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6d/v3/AR9BsVhhTXe37ptM6gLh2Q/zh-cn_image_0000002594828168.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=89B615647034F498267D099E02E2832DDF03AC166CC2C051D7DDAB7CE864AB9F) | #33ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/87/v3/nNhBQXfgRpeR7WXFSvHUuQ/zh-cn_image_0000002625187615.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=845BE035F1222342930A5BBC4FE9227C93A32AD34D3D679BDD4CCEB3DCC6E1A6) |
| theme.colors.fontEmphasize | 高亮文本 | #ff0a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7d/v3/5MQWuV-lRvOAtNx_7KPcPQ/zh-cn_image_0000002625107751.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=32F7E332FCE5294F4911BC49806CDDBDE1444D143B56B58B5856083BA4C42FA9) | #ff317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fd/v3/ounBE0h-RM-u_Zdw0foIew/zh-cn_image_0000002594668234.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=9D0E89292F24D1FC179279561D799CA3F835B054AAA8C1ECE4C0C78FF8EE7331) |
| theme.colors.fontOnPrimary | 一级文本反色 | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/90/v3/xRacN2fWTCmNfFKkg1-RqQ/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=5013D4DCB20D95C8C9085DE66F749B78F74C3BB33FD3028960EBF6913024D812) | #ff000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/87/v3/BtuiJgsSSrCH7XPjMz3xtg/zh-cn_image_0000002594668242.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=51A87E8B8F6656BD605A148A19836ADF483BBC4114DF497D69352C3DD2ADDCA3) |
| theme.colors.fontOnSecondary | 二级文本反色 | #99ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/10/v3/fpmT86sHQVGDb095xFI0vA/zh-cn_image_0000002625187613.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=221AD97E3FAEAD8A8DEBEA9502CAB4BFC2C84809CF1A4DFDE8954DD3792F0535) | #99000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/99/v3/uFUg2MubRKiEkaOJ7Qe6DA/zh-cn_image_0000002594828166.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=ACD8B1FA41BB8E758F5A92463F10273E743F66D93E7E6490F73485E030F3F9E5) |
| theme.colors.fontOnTertiary | 三级文本反色 | #66ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2a/v3/V1ZRW6aKTwCv_FqEFT7Fgg/zh-cn_image_0000002594668240.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=4918627AF40BA6AC0F934C0385F187018115BED75D9656A0CBC7D4BBDCB44505) | #66000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/43/v3/bKqEBPTGTCSWsONLZnag9w/zh-cn_image_0000002625107757.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=42C70373C3474E83842A7CD803B0605814E2EF037CFF4E8A6BEF87189A41DFB5) |
| theme.colors.fontOnFourth | 四级文本反色 | #33ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/74/v3/Yzl-LiiYTLCAQ28euXk_GQ/zh-cn_image_0000002625187615.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=CBE017F00F8E9546E5B00B40E9370EA23AA84265B4EAD2EFE866B4815A2334AB) | #33000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/50/v3/Xes6BG9gTDC8KcDZhS288A/zh-cn_image_0000002594828168.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=5344E34AF9D3C1540FF3EB14320ED6EEF58B51B1BBB7BD677BEAFBF663D3B059) |
| theme.colors.iconPrimary | 一级图标 | #e5000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/18/v3/bQgPo90ITLK7fP9R0fuC5g/zh-cn_image_0000002625107755.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=7D187783F85F0625E75A0E5423CEA9FAC3EA9382A77DB7D48C958212ECE8E594) | #e5ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1a/v3/3TnYrx--Q0iD0pftXe9CxA/zh-cn_image_0000002594668238.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=C23252A1347F08D635AC3DF8E5827974FE5D64A3D046839A480A321EC0A06E38) |
| theme.colors.iconSecondary | 二级图标 | #99000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/71/v3/CxVPH1YgT5q-F059Ihoq2Q/zh-cn_image_0000002594828166.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=C59A22EACA11F0154B1398508E86223CF86B799A48538FC85BA8899C5CDBD9BC) | #99ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c/v3/6DQswxxASXKDT2JBQCcIqw/zh-cn_image_0000002625187613.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=D61972980464BC465FA9C6D19A3CF37997F2D0AF0C25CD30A781B2AFF4D73538) |
| theme.colors.iconTertiary | 三级图标 | #66000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3a/v3/P451bhQNSr-_N83AmIP7vA/zh-cn_image_0000002625107757.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=F513B59B29D9BE2A97F53EA86A21AF98E5A4A61551E5443ADA6BC29A28A53F8E) | #66ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/21/v3/iDTYrwYARxGG7eUWHvV01g/zh-cn_image_0000002594668240.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=70AA3F6123C8791EBF3D29CC72F68801EFAB26054D135B3FF102FC766AD88634) |
| theme.colors.iconFourth | 四级图标 | #33000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4b/v3/AlPCI15RSUW9LyTXwv-7-w/zh-cn_image_0000002594828168.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=EA7D0ADF1A648753C7971FEA40F3D05BE2CBA25A5954C3A4D1E661F77E2D7EA6) | #33ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/48/v3/9mTVgaU-SmybKI5Px1tt6A/zh-cn_image_0000002625187615.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=ACA5409AC3CE5F0BE29853BAE62DCC4B0D8FCB51537DF0EBB4B903445C133D40) |
| theme.colors.iconEmphasize | 高亮图标 | #ff0a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ab/v3/UqRaUwIpQw6Oqj1dwBj06Q/zh-cn_image_0000002625107751.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=245C0F3C3D408AA39278FB3F241476A41917876E1CD22E2A56D9E8A83A72B73C) | #ff317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c3/v3/uM3Taz90QCWsN4X1q4C4ng/zh-cn_image_0000002594668234.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=E8E988A920AAC471AC47EF339D57B98DBE7F5CE3B0142A7F31B4DE0882F7BB24) |
| theme.colors.iconSubEmphasize | 高亮辅助图标 | #660a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/69/v3/ZmXCocBGQw2zzpTNnGkdOQ/zh-cn_image_0000002594828170.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=94F689A6802C5EE7C30D748E9502F27E38A4A71AD98B15C0898A13B13F17BC25) | #66317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/kPH4dKRNR7ydcei4kQ2k2Q/zh-cn_image_0000002625187617.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=462DA80F9F622DAEACA610F967474CDCD75A8D64EC59B979A999C787739712F4) |
| theme.colors.iconOnPrimary | 一级图标反色 | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e2/v3/WuCZDfyGS_q5wIZY1zosBQ/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=665B3D4D464FE8A218ABD4055FA800BF028025DBE8ADE090AC605D011965256D) | #ff000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/85/v3/qCfvt0cvQceEqljli2Rmvw/zh-cn_image_0000002594668242.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=3CE76AB0877C14CCF5DBD5CF0E1138A97B44733C25EADB3A0D439ECC06F7359F) |
| theme.colors.iconOnSecondary | 二级图标反色 | #99ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/63/v3/DW-JaqajQ3SCwKTx0Uz02g/zh-cn_image_0000002625187613.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B254994C138B04D0253FE9EC10107938117AF9C3E5BB5593A9AED966BC61070E) | #99000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e2/v3/6Wuzy00kRn6AlE9uDnhaFQ/zh-cn_image_0000002594828166.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=D9BF92188354DDE53B8CB8F6D41ACFD9C028C1D770406A44DC5C9290EAF413E6) |
| theme.colors.iconOnTertiary | 三级图标反色 | #66ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/50/v3/PTZvtfV9QLKxGyYyc7u5Zg/zh-cn_image_0000002594668240.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=65118CF8D47D856D81829E13DC708CD1A832CE65F8B4F116BFCFFE72A8ACBFC3) | #66000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b5/v3/O8fDbl38Qqmx0XgKL80X-A/zh-cn_image_0000002625107757.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=1F405C65AA19D70E79B308D2E6562C337DC9A4605C995BDC758BB3DAD6B80284) |
| theme.colors.iconOnFourth | 四级图标反色 | #33ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fa/v3/3nL9t7_6Qm2LXctrYHnXQQ/zh-cn_image_0000002625187615.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B711F8477F3AE9EBD0F96CCAE498B38612AD8B46390982C175AC850C2E7DD0F9) | #33000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d1/v3/wfTjqfwrTLu1LLj-Tpe_xg/zh-cn_image_0000002594828168.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=F7588626AA2EB9128DD2759639063E7F05D9C040F6FAD4BAEC2078B1947FDD62) |
| theme.colors.backgroundPrimary | 一级背景（实色/不透明色） | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a7/v3/jdaqKkRJRX6u-S6QJ6iCXQ/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=9B7FED98976E7F9354519285A79754E9A27B15249A2AC9507BE66A83A1097700) | #ffe5e5e5 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5b/v3/xFE4q50VQs6sU3C2n093eQ/zh-cn_image_0000002625107761.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B905F087C9ED6A77974380ABD3ACF0718400D33B50DF4E5452B36741444BD819) |
| theme.colors.backgroundSecondary | 二级背景（实色/不透明色） | #fff1f3f5 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/41/v3/szvj3RtBRX2HU9PGgDj7_w/zh-cn_image_0000002594668244.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=6BD21047918E75476FD0F4F9FDD992AD7C68758A1B300590F04662EF8C0612ED) | #ff191a1c | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/54/v3/wGvtnvFLT_uqsQcDzPgcWw/zh-cn_image_0000002594828172.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=5947A15F446CA2A54C612AE2CF601D8CD92B7FE7355994C94C57159958934FB3) |
| theme.colors.backgroundTertiary | 三级背景（实色/不透明色） | #ffe5e5ea | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c9/v3/dRuYH093QiK-d-gac_bEXQ/zh-cn_image_0000002625187619.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=30B89D292EBB2A3678E02708C1D68FB1EF17EB6E70FC0D55530B76E1A63460C3) | #ff202224 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a6/v3/uMosO2rbTLecbqDzutZDtg/zh-cn_image_0000002625107763.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=FBEFB5D52AEF7A9EB70BC51122A0A3B0B3638C1893A1802D8BD1555DEB705DFD) |
| theme.colors.backgroundFourth | 四级背景（实色/不透明色） | #ffd1d1d6 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bb/v3/RqYDq_fDRTeyswzaKvF9qw/zh-cn_image_0000002594668246.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=A548E625A3D69E61B0D1276D5A244DF58D5715B5F0DFD1F539BFF736E868B593) | #ff2e3033 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/78/v3/LUDGai_UQ5-LLmy6Y5hJrA/zh-cn_image_0000002594828174.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=9D3E8154DD64471D883281C584E8BA841360FEEA03FC0DFB73130D6F4F4D1D8E) |
| theme.colors.backgroundEmphasize | 高亮背景（实色/不透明色） | #ff0a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0a/v3/f7Iu_377TxGzKxf9D6rTYg/zh-cn_image_0000002625107751.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AFC4EDA4813E905B908265FDDD993CDCBF9122422A000FECB437264D5912F8E1) | #ff317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c6/v3/7IDriWn0QVK8hCWBHaozMg/zh-cn_image_0000002594668234.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=184CEDD9CD2F728B21A7BFB6024C611327B75DFA017EC5B5AC5AE743F588BC36) |
| theme.colors.compForegroundPrimary | 前背景 | #ff000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5f/v3/0ulk85W6Teun2T_R1CR7XA/zh-cn_image_0000002594668242.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AC61552F8271EC422D75E6CA24BABDD8EF8E3F33B5E42CB3DDEC47853EA3968D) | #ffe5e5e5 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/74/v3/xxMS2eAcTz-FaEfCMPGAUQ/zh-cn_image_0000002625107761.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=7BC3FAE3BF933C9D8328DBE194A3BC9FC3DDE10F8504ABC7DD3DB7B29817C6C7) |
| theme.colors.compBackgroundPrimary | 白色背景 | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ff/v3/1u6KYmKJTN-iiWmw0dh5cg/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B025D34C7BADB62E728F056B4E5601D6A0D66D314CE9C489CAC629B3A79078AB) | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a9/v3/c7JIdjjFS9ecECyQ1BOGfw/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=FE7DF05E272427847AC9CFE78B71EC1E6EA5F3A35167B5B8BF81CEBE727CC7BB) |
| theme.colors.compBackgroundPrimaryTran | 白色透明背景 | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/38/v3/yYzSpqPlQrOei-YKP6lkgw/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=5488586597BFA4E78FE08F13CA0C90BA2A6B1759832FA08B460609B95DF53E4B) | #33ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1e/v3/5q60OSzIReOnZqiaq6kByQ/zh-cn_image_0000002625187615.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=9006764FFA095CCBDC05B2C15D710B90814B7C2C5DA4FCD90FB961DD9AB9C935) |
| theme.colors.compBackgroundPrimaryContrary | 常亮背景 | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1d/v3/Sko_OXQvSSSsw_3ClMiYSQ/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=4D49DDA1EA98E9229A91A93102771F18851878B2EFEF673DA5CA787EDF54D482) | #ffe5e5e5 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a3/v3/GrXKznFMTM6kqedjxDCdbw/zh-cn_image_0000002625107761.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=54877CA961EA359A8108267DE603D5DB098E5DBF733C34C346386C7338BB9542) |
| theme.colors.compBackgroundGray | 灰色背景 | #fff1f3f5 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/97/v3/Nm7CckMTTFe9N7WnTnFImg/zh-cn_image_0000002594668244.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=85EF21F37335BEA0E0274BEAFA027184DD039DA0F74CFA19A016B0B19111D2C2) | #ffe5e5ea | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/66/v3/Ei7V5UrUQcibZI-ADO-nag/zh-cn_image_0000002625187619.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=6A93308D9713C47C811BB84E6F18C1CF906CA371E35BE73B86D12B6AD22774C5) |
| theme.colors.compBackgroundSecondary | 二级背景 | #19000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/36/v3/B-0Gm4T7R0Cj5fDe17wHKg/zh-cn_image_0000002625187621.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=A01DF46D0F08CD03B161E7779549D475806705E6ABD7CFAABB3230B105329C43) | #19ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/85/v3/4VWF8DvYQ0ebZtVhn3Ykag/zh-cn_image_0000002625107765.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AC9BFAACBB5C05190BF3C84D1478E2BE3E90B304C304B7E443AA8557FB2B153D) |
| theme.colors.compBackgroundTertiary | 三级背景 | #0c000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c0/v3/t-gPidNUR0WTTEv5s3bPDg/zh-cn_image_0000002594668248.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=7E3B558BD2C1F786ED41EEE6D62AC2D06436AF118CA57E232E1AC736F471E2C7) | #0cffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/64/v3/f1l14cgwS2u6CISvbzl56A/zh-cn_image_0000002594828176.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AA3EBE0C4C4CA37E73FEF3CDC9E4EECD7E37EFC23BD2A24C8E0A7F5F86C4F87C) |
| theme.colors.compBackgroundEmphasize | 高亮背景 | #ff0a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4/v3/35DNvRiATB2MQDF-RIJnKQ/zh-cn_image_0000002625107751.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=00082B991665CD3B4B217569E3054F1E24F17CF668187D9D8C18BBF75E276ADE) | #ff317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c1/v3/_tTOAZaXRHCb6gip6J4t7w/zh-cn_image_0000002594668234.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=A13027252B7355F75AAE2DD01BA3A2B8F105DC600A0A8C4622A430A52BDA0B17) |
| theme.colors.compBackgroundNeutral | 黑色中性高亮背景 | #ff000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/72/v3/dbw9TLEPQG6RopoW0a6eSg/zh-cn_image_0000002594668242.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=0E281C3D01B78E55EE95782F49D8DCD4C08EB2E5D439E9917FAFC4E4E0801E49) | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/85/v3/NPBBOohvQcqBU9sqKZRvZw/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=64E2AAD29038910504B28E1B621EED8714E295E95FE7C206174CC3BCD75E7B36) |
| theme.colors.compEmphasizeSecondary | 20%高亮背景 | #330a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d0/v3/dfEtLNa9RaaCIALWoEemDw/zh-cn_image_0000002625187623.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=F0F52E5B4C5B4379233EA6DBDF8CA59FC8A70DA7988909467ABA104FA35EFE14) | #33317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/90/v3/18cKysp5R3GNsPM3PfkInQ/zh-cn_image_0000002625107767.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=8E1973668C93F288DEC4201E43AF532C4C9E7FD75C4F8866D5E4A6C9B0628CA3) |
| theme.colors.compEmphasizeTertiary | 10%高亮背景 | #190a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3b/v3/FRSgwq66R3m1Uhy_IrqC_g/zh-cn_image_0000002594668250.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B288E0B572A0EA02B5781B3BF20776A4D92BE0B17E59E1A7F87A11A8431C9222) | #19317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5b/v3/bEzSsil8TaeIOgLgoqWT-g/zh-cn_image_0000002594828178.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=FC2DCE988C44DF6F69B0A67062574040C61AA30A14F6B930D4B697E89B67711B) |
| theme.colors.compDivider | 分割线颜色 | #33000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a5/v3/NlCaEY4YQoyDV0T5dGOqZA/zh-cn_image_0000002594828168.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=FC29EC8B9F98B04127CE4389F8C241D57936F8B349A17515C58A17945C401B71) | #33ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f6/v3/DF45F_bpTXCrAx8pe5DEHA/zh-cn_image_0000002625187615.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=16513DC4624392EC39717BE0B84E8AF4A359CD3EAD67FE653BCFC138A83124F7) |
| theme.colors.compCommonContrary | 通用反色 | #ffffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0c/v3/IecOWKDyRyC2u9-u0gumwA/zh-cn_image_0000002625107759.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=8907841222712C1CB04BD0396230ED41DC718864A7089D07A9B45A1F6D56EA71) | #ff000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e9/v3/Rmimpj9WQleIOQulHwgZ_w/zh-cn_image_0000002594668242.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=DF9D9F75F07B445CBD6009EE948455A716F4EFD2C4653407FC26D3A2737769D3) |
| theme.colors.compBackgroundFocus | 获焦态背景色 | #fff1f3f5 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/26/v3/lMpFTEc1Q_mshDRIg2FKXQ/zh-cn_image_0000002594668244.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=2818C9F73A66917C4845578FE16F5225595A01BEA921A4419178ACD7E2CA61CC) | #ff000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8f/v3/3M1HdtWkREKIUTqlWjSMEg/zh-cn_image_0000002594668244.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=CA15F54E43A131BDC2E5BA9526E6D5AECB71E0279E93AA69221427D0941215D9) |
| theme.colors.compFocusedPrimary | 获焦态一级反色 | #e5000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b4/v3/eMrwP9pfTDaYzepr5b00Qw/zh-cn_image_0000002625107755.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=C8B74E8B8CB836536CEC08D8CB4B9AEAE2BF219C7FE3DF33B6A4FF730F412839) | #e5ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/29/v3/KUBJ_1gKRS2uotIEnp1Bnw/zh-cn_image_0000002594668238.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=74161DC188CA891A5E20C2813AAFF035725F967D95982DFAC63AFD1E1EE9CA5E) |
| theme.colors.compFocusedSecondary | 获焦态二级反色 | #99000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0a/v3/GZMw-IN_QYu7roqwteq1Eg/zh-cn_image_0000002594828166.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=BA0D0C9A33663D9417520DCB7AAA590D6AFF7BB3EA0AC3D9DDC2EC3DC5447798) | #99ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0e/v3/q3VcUKGwTT648dQRgDKHsg/zh-cn_image_0000002625187613.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=703AB4A1B4E280F996D9D92C07E0B6DAC0773AF6CC49AC166B316A09E17A7C9C) |
| theme.colors.compFocusedTertiary | 获焦态三级反色 | #66000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b6/v3/ZGr46MDdRnmqygLwO3MARQ/zh-cn_image_0000002625107757.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=7E1F887C8FBF526E2CBB0F255A62DCCE0D13281348DDC1FCC0CBED2DFD5A9AAB) | #66ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/63/v3/u6SqaLz0TMOoj1ktNXXSRg/zh-cn_image_0000002594668240.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B76349562085A596E65060CD3C4E511A321A962CAE9ACC52ABCAF0647AF62667) |
| theme.colors.interactiveHover | 通用悬停交互式颜色 | #0c000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/32/v3/LvEBjqOwTm6h4O22RzWOaw/zh-cn_image_0000002594668248.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AA248446ACADBD380A2206F7E6C34615A073B08072650B159FEC08584A2E0A47) | #0cffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d2/v3/HqN05izQQbayTF7bJr7BnQ/zh-cn_image_0000002594828176.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=65A3713D3649840ECC11EA77A054224B1FBE7AE6057C37B040CFB6606808A7F9) |
| theme.colors.interactivePressed | 通用按压交互式颜色 | #19000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a7/v3/uyBHUIe7Tq6v6jXJp_5rIQ/zh-cn_image_0000002625187621.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=6A81B82566D7CC65D7AB910757C2F2DACEACFEC623B8C20CF8096360CC49AB37) | #19ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/dd/v3/aTZ4PndFRQCNO5-W_LwTkw/zh-cn_image_0000002625107765.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=447D8DDEDFD6F47C67089EDAEB7DE998DC1C1999CF3D802C6D4175DFF5A7B23D) |
| theme.colors.interactiveFocus | 通用获焦交互式颜色 | #ff0a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2e/v3/YjoteerVQ4W0k0Z1S_tREw/zh-cn_image_0000002625107751.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=DB37287E20B83BDF4A3A6B2EFF592D9E279E1F48FEE95B87EA6F8FAE0B8BC2C0) | #ff317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1a/v3/UrlJnj5dQ3uwrtq9LLUekA/zh-cn_image_0000002594668234.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=45DA4968A61E1093610F50E104E7A375E50138A7B944F3E811DE91CFC4ABADCD) |
| theme.colors.interactiveActive | 通用激活交互式颜色 | #ff0a59f7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8c/v3/DSqqVe0xSH6wenQL631MDw/zh-cn_image_0000002625107751.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=E796C28A05CF7F6B4D2EB078AE07E5DB5216F1AAD723CAC2D80B89F2E8E1BDAD) | #ff317af7 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/98/v3/NEl00AR-RuWf8iTjxpCb0Q/zh-cn_image_0000002594668234.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=91224E68479C06420876402889C892F0FF64D82E783F1870D2A4C38F38D79025) |
| theme.colors.interactiveSelect | 通用选择交互式颜色 | #33000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2d/v3/QcKiRJfuReyXa10FLF-Dzg/zh-cn_image_0000002594828168.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=9739E99606E19F6FD42D3A5AD7D01CCB56450F0056E10063FE3F2CB63EF6B2F1) | #33ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3a/v3/rEF93uZ4Rd6NrT-aMHrdlw/zh-cn_image_0000002625187615.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=4BA3FDDF0AA56F98AA777914F6283844F3B20360721DA53157CC18CF0A2678CF) |
| theme.colors.interactiveClick | 通用点击交互式颜色 | #19000000 | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/62/v3/p3-POrD4TlWag4FYQWTV8w/zh-cn_image_0000002625187621.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=AF5108DE8199DC8494DC47B609E2E5D81B474609CE1CD16FEB60D72CB4727B15) | #19ffffff | ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8d/v3/IAN08JOISiKaWpxn42bBCQ/zh-cn_image_0000002625107765.png?HW-CC-KV=V1&HW-CC-Date=20260612T073314Z&HW-CC-Expire=86400&HW-CC-Sign=B4B9244928A4F5F101140D3CDF73F78558E4092E003F46713962ED8345FC1A4E) |

各个token色值可影响的组件可参考[Colors](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-theme#colors)接口说明。