1# @ohos.arkui.Theme(主题换肤) 2 3支持自定义主题风格，实现App组件风格跟随Theme切换。 4 5> **说明：** 6> 7> 本模块首批接口从API version 12开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 8 9## 导入模块 10 11```ts 12import { Theme, ThemeControl, CustomColors, Colors, CustomTheme } from '@kit.ArkUI'; 13``` 14 15## Theme 16 17当前生效的主题风格对象，可从[onWillApplyTheme](arkui-ts/ts-custom-component-lifecycle.md#onwillapplytheme12)中获取。 18 19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23| 名称 | 类型 | 可读 | 可写 | 说明 | 24| ------ |-------------------|-----|-----|----------| 25| colors | [Colors](#colors) | 否 | 否 | 主题颜色资源。 | 26 27## Colors 28 29主题颜色资源。 30 31**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35| 名称 | 类型 | 可读 | 可写 | 说明 | 36|-------------------------------|-----------------------------------------------------|-----|-----|------------------| 37| brand | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 品牌色。 | 38| warning | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级警示色。 | 39| alert | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级提示色。 | 40| confirm | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 确认色。 | 41| fontPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级文本字体颜色。 | 42| fontSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级文本字体颜色。 | 43| fontTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级文本字体颜色。 | 44| fontFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级文本字体颜色。 | 45| fontEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮字体颜色。 | 46| fontOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级文本反转颜色，用于彩色背景。 | 47| fontOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级文本反转颜色，用于彩色背景。 | 48| fontOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级文本反转颜色，用于彩色背景。 | 49| fontOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级文本反转颜色，用于彩色背景。 | 50| iconPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级图标颜色。 | 51| iconSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级图标颜色。 | 52| iconTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级图标颜色。 | 53| iconFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级图标颜色。 | 54| iconEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮图标颜色。 | 55| iconSubEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮辅助图标颜色。 | 56| iconOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级图标反转颜色，用于彩色背景。 | 57| iconOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级图标反转颜色，用于彩色背景。 | 58| iconOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级图标反转颜色，用于彩色背景。 | 59| iconOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级图标反转颜色，用于彩色背景。 | 60| backgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级背景颜色（实色，不透明）。 | 61| backgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级背景颜色（实色，不透明）。 | 62| backgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级背景颜色（实色，不透明）。 | 63| backgroundFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级背景颜色（实色，不透明）。 | 64| backgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮背景颜色（实色，不透明）。 | 65| compForegroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 前背景。 | 66| compBackgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 白色背景。 | 67| compBackgroundPrimaryTran | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 白色透明背景。 | 68| compBackgroundPrimaryContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 常亮背景。 | 69| compBackgroundGray | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 灰色背景。 | 70| compBackgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级背景。 | 71| compBackgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级背景。 | 72| compBackgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮背景。 | 73| compBackgroundNeutral | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 黑色中性高亮背景颜色。 | 74| compEmphasizeSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 20%高亮背景颜色。 | 75| compEmphasizeTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 10%高亮背景颜色。 | 76| compDivider | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用分割线颜色。 | 77| compCommonContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用反转颜色。 | 78| compBackgroundFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态背景颜色。 | 79| compFocusedPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态一级反转颜色。 | 80| compFocusedSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态二级反转颜色。 | 81| compFocusedTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态三级反转颜色。 | 82| interactiveHover | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用悬停交互式颜色。 | 83| interactivePressed | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用按压交互式颜色。 | 84| interactiveFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用获焦交互式颜色。 | 85| interactiveActive | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用激活交互式颜色。 | 86| interactiveSelect | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用选择交互式颜色。 | 87| interactiveClick | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用点击交互式颜色。 | 88 89## CustomTheme 90 91自定义主题风格对象。 92 93**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97| 名称 | 类型 | 只读 | 可选 | 说明 | 98|-------------------------------|-----------------------------------------------------|-----|-----|------------| 99| colors | [CustomColors](#customcolors) | 否 | 是 | 自定义主题颜色资源。 | 100 101## CustomColors 102 103type CustomColors = Partial\<Colors> 104 105自定义主题颜色资源类型。 106 107**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111| 类型 | 说明 | 112|-----|--------------| 113| Partial<[Colors](#colors)> | 自定义主题颜色资源类型。 | 114 115## ThemeControl 116 117ThemeControl将自定义Theme应用于App组件内，实现App组件风格跟随Theme切换。 118 119**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 120 121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 122 123### setDefaultTheme 124 125setDefaultTheme(theme: [CustomTheme](#customtheme)): void 126 127将用户自定义Theme设置应用级默认主题，实现应用风格跟随Theme切换。 128 129**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133| 参数名 | 类型 | 必填 | 说明 | 134|--------------|------------------------------|------|----------------| 135| theme | [CustomTheme](#customtheme) | 是 | 表示设置的自定义主题风格 | 136 137**示例** 138 139```ts 140import { CustomTheme, CustomColors, ThemeControl } from '@kit.ArkUI'; 141// 自定义主题颜色 142class BlueColors implements CustomColors { 143 fontPrimary = Color.White; 144 backgroundPrimary = Color.Blue; 145 brand = Color.Blue; //品牌色 146} 147 148class PageCustomTheme implements CustomTheme { 149 colors?: CustomColors; 150 151 constructor(colors: CustomColors) { 152 this.colors = colors; 153 } 154} 155// 创建实例 156const BlueColorsTheme = new PageCustomTheme(new BlueColors()); 157// 在页面build之前执行ThemeControl.setDefaultTheme，设置App默认样式风格为BlueColorsTheme。 158ThemeControl.setDefaultTheme(BlueColorsTheme); 159``` 160