1# @ohos.arkui.theme(主题换肤) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @lushi871202--> 5<!--Designer: @lushi871202--> 6<!--Tester: @sally__--> 7<!--Adviser: @HelloCrease--> 8 9支持自定义主题风格，实现App组件风格跟随Theme切换。 10 11> **说明：** 12> 13> 本模块首批接口从API version 12开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 14 15## 导入模块 16 17```ts 18import { Theme, ThemeControl, CustomColors, Colors, CustomTheme, CustomDarkColors } from '@kit.ArkUI'; 19``` 20 21## Theme 22 23当前生效的主题风格对象，可从[onWillApplyTheme](arkui-ts/ts-custom-component-lifecycle.md#onwillapplytheme12)中获取。 24 25**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29| 名称 | 类型 | 只读 | 可选 | 说明 | 30| ------ |-------------------|-----|-----|----------| 31| colors | [Colors](#colors) | 否 | 否 | 主题颜色资源。 | 32 33## Colors 34 35主题颜色资源。 36 37**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41<!--RP1--><!--RP1End--> 42 43| 名称 | 类型 | 只读 | 可选 | 说明 | 44|-------------------------------|-----------------------------------------------------|-----|-----|------------------| 45| brand | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 品牌色。</br>**影响组件：** [TextInput](./arkui-ts/ts-basic-components-textinput.md)、[Search](./arkui-ts/ts-basic-components-search.md) | 46| warning | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级警示色。</br>**影响组件：** [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog)、[AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)、[CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12)、</br>[Badge](./arkui-ts/ts-container-badge.md)、[Button](./arkui-ts/ts-basic-components-button.md) | 47| alert | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级提示色。</br>**影响组件：** 暂无组件使用。 | 48| confirm | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 确认色。</br>**影响组件：** 暂无组件使用。 | 49| fontPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级文本字体颜色。</br>**影响组件：** [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md)、[LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog)、[TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog)、</br>[ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog)、[AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)、[SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog)、</br>[CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12)、[Swiper](./arkui-ts/ts-container-swiper.md)、[Text](./arkui-ts/ts-basic-components-text.md)、</br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md)、[ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md)、[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)、</br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md)、[Select](./arkui-ts/ts-basic-components-select.md)、[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)、</br>[ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)、[Menu](./arkui-ts/ts-basic-components-menu.md)、[TextInput](./arkui-ts/ts-basic-components-textinput.md)、</br>[Search](./arkui-ts/ts-basic-components-search.md)、[Counter](./arkui-ts/ts-container-counter.md)、[TimePicker](./arkui-ts/ts-basic-components-timepicker.md)、[DatePicker](./arkui-ts/ts-basic-components-datepicker.md)、</br>[TextPicker](./arkui-ts/ts-basic-components-textpicker.md)、[ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md)、[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 50| fontSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级文本字体颜色。</br>**影响组件：** [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md)、[AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)、[CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12)、</br>[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md)、[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)、[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md)、</br>[TextInput](./arkui-ts/ts-basic-components-textinput.md)、[Search](./arkui-ts/ts-basic-components-search.md)、[ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md)、</br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 51| fontTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级文本字体颜色。</br>**影响组件：** [ComposeListItem](./arkui-ts/ohos-arkui-advanced-ComposeListItem.md) | 52| fontFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级文本字体颜色。</br>**影响组件：** 暂无组件使用。 | 53| fontEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮字体颜色。</br>**影响组件：** [TipsDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#tipsdialog)、[ConfirmDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#confirmdialog)、[AlertDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#alertdialog)、</br>[SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog)、[CustomContentDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#customcontentdialog12)、[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md)、</br>[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)、[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md)、[Button](./arkui-ts/ts-basic-components-button.md)、</br>[Select](./arkui-ts/ts-basic-components-select.md)、[ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)、[Search](./arkui-ts/ts-basic-components-search.md)、</br>[TimePicker](./arkui-ts/ts-basic-components-timepicker.md)、[DatePicker](./arkui-ts/ts-basic-components-datepicker.md)、[TextPicker](./arkui-ts/ts-basic-components-textpicker.md) | 54| fontOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级文本反转颜色，用于彩色背景。</br>**影响组件：** [Badge](./arkui-ts/ts-container-badge.md)、[Button](./arkui-ts/ts-basic-components-button.md)、[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) | 55| fontOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级文本反转颜色，用于彩色背景。</br>**影响组件：** 暂无组件使用。 | 56| fontOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级文本反转颜色，用于彩色背景。</br>**影响组件：** 暂无组件使用。 | 57| fontOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级文本反转颜色，用于彩色背景。</br>**影响组件：** 暂无组件使用。 | 58| iconPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级图标颜色。</br>**影响组件：** [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md)、[Swiper](./arkui-ts/ts-container-swiper.md)、[ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md)、</br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 59| iconSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级图标颜色。</br>**影响组件：** [LoadingDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#loadingdialog)、[SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md)、[LoadingProgress](./arkui-ts/ts-basic-components-loadingprogress.md)、</br>[Popup](./arkui-ts/ohos-arkui-advanced-Popup.md)、[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)、[Search](./arkui-ts/ts-basic-components-search.md)、</br>[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 60| iconTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级图标颜色。</br>**影响组件：** [SubHeader](./arkui-ts/ohos-arkui-advanced-SubHeader.md) | 61| iconFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级图标颜色。</br>**影响组件：** [Checkbox](./arkui-ts/ts-basic-components-checkbox.md)、[CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md)、[Radio](./arkui-ts/ts-basic-components-radio.md) | 62| iconEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮图标颜色。</br>**影响组件：** [ToolBar](./arkui-ts/ohos-arkui-advanced-ToolBar.md) | 63| iconSubEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮辅助图标颜色。</br>**影响组件：** 暂无组件使用。 | 64| iconOnPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级图标反转颜色，用于彩色背景。</br>**影响组件：** [Checkbox](./arkui-ts/ts-basic-components-checkbox.md)、[CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md)、[Radio](./arkui-ts/ts-basic-components-radio.md) | 65| iconOnSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级图标反转颜色，用于彩色背景。</br>**影响组件：** [Chip](./arkui-ts/ohos-arkui-advanced-Chip.md) | 66| iconOnTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级图标反转颜色，用于彩色背景。</br>**影响组件：** 暂无组件使用。 | 67| iconOnFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级图标反转颜色，用于彩色背景。</br>**影响组件：** [ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md) | 68| backgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 一级背景颜色（实色，不透明）。</br>**影响组件：** [TextInput](./arkui-ts/ts-basic-components-textinput.md)、[QRCode](./arkui-ts/ts-basic-components-qrcode.md) | 69| backgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级背景颜色（实色，不透明）。</br>**影响组件：** 暂无组件使用。 | 70| backgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级背景颜色（实色，不透明）。</br>**影响组件：** 暂无组件使用。 | 71| backgroundFourth | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 四级背景颜色（实色，不透明）。</br>**影响组件：** 暂无组件使用。 | 72| backgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮背景颜色（实色，不透明）。</br>**影响组件：** [Progress](./arkui-ts/ts-basic-components-progress.md)、[Button](./arkui-ts/ts-basic-components-button.md)、[Slider](./arkui-ts/ts-basic-components-slider.md) | 73| compForegroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 前背景。</br>**影响组件：** [QRCode](./arkui-ts/ts-basic-components-qrcode.md) | 74| compBackgroundPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 白色背景。</br>**影响组件：** 暂无组件使用。 | 75| compBackgroundPrimaryTran | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 白色透明背景。</br>**影响组件：** 暂无组件使用。 | 76| compBackgroundPrimaryContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 常亮背景。</br>**影响组件：** [Toggle](./arkui-ts/ts-basic-components-toggle.md)、[Slider](./arkui-ts/ts-basic-components-slider.md) | 77| compBackgroundGray | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 灰色背景。</br>**影响组件：** 暂无组件使用。 | 78| compBackgroundSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 二级背景。</br>**影响组件：** [Swiper](./arkui-ts/ts-container-swiper.md)、[Slider](./arkui-ts/ts-basic-components-slider.md) | 79| compBackgroundTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 三级背景。</br>**影响组件：** [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md)、[Progress](./arkui-ts/ts-basic-components-progress.md)、[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)、</br>[Button](./arkui-ts/ts-basic-components-button.md)、[Select](./arkui-ts/ts-basic-components-select.md)、[Toggle](./arkui-ts/ts-basic-components-toggle.md)、</br>[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)、[TextInput](./arkui-ts/ts-basic-components-textinput.md)、[Search](./arkui-ts/ts-basic-components-search.md) | 80| compBackgroundEmphasize | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 高亮背景。</br>**影响组件：** [Swiper](./arkui-ts/ts-container-swiper.md)、[Toggle](./arkui-ts/ts-basic-components-toggle.md)、[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)、</br>[Checkbox](./arkui-ts/ts-basic-components-checkbox.md)、[CheckboxGroup](arkui-ts/ts-basic-components-checkboxgroup.md)、[Radio](./arkui-ts/ts-basic-components-radio.md) | 81| compBackgroundNeutral | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 黑色中性高亮背景颜色。</br>**影响组件：** [PatternLock](./arkui-ts/ts-basic-components-patternlock.md) | 82| compEmphasizeSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 20%高亮背景颜色。</br>**影响组件：** [Progress](./arkui-ts/ts-basic-components-progress.md)、[ProgressButton](./arkui-ts/ohos-arkui-advanced-ProgressButton.md)、[AlphabetIndexer](./arkui-ts/ts-container-alphabet-indexer.md)、</br>[Select](./arkui-ts/ts-basic-components-select.md)、[Toggle](./arkui-ts/ts-basic-components-toggle.md) | 83| compEmphasizeTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 10%高亮背景颜色。</br>**影响组件：** 暂无组件使用。 | 84| compDivider | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用分割线颜色。</br>**影响组件：** [SelectDialog](./arkui-ts/ohos-arkui-advanced-Dialog.md#selectdialog)、[PatternLock](./arkui-ts/ts-basic-components-patternlock.md)、[Divider](./arkui-ts/ts-basic-components-divider.md) | 85| compCommonContrary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用反转颜色。</br>**影响组件：** 暂无组件使用。 | 86| compBackgroundFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态背景颜色。</br>**影响组件：** 暂无组件使用。 | 87| compFocusedPrimary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态一级反转颜色。</br>**影响组件：** 暂无组件使用。 | 88| compFocusedSecondary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态二级反转颜色。</br>**影响组件：** 暂无组件使用。 | 89| compFocusedTertiary | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 获焦态三级反转颜色。</br>**影响组件：** [Scroll](arkui-ts/ts-container-scroll.md) | 90| interactiveHover | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用悬停交互式颜色。</br>**影响组件：** [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md)、[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)、[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 91| interactivePressed | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用按压交互式颜色。</br>**影响组件：** [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md)、[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)、[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 92| interactiveFocus | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用获焦交互式颜色。</br>**影响组件：** [EditableTitleBar](./arkui-ts/ohos-arkui-advanced-EditableTitleBar.md)、[Chip](./arkui-ts/ohos-arkui-advanced-Chip.md)、[TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 93| interactiveActive | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用激活交互式颜色。</br>**影响组件：** [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 94| interactiveSelect | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用选择交互式颜色。</br>**影响组件：** [TreeView](./arkui-ts/ohos-arkui-advanced-TreeView.md) | 95| interactiveClick | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | 否 | 否 | 通用点击交互式颜色。</br>**影响组件：** 暂无组件使用。 | 96 97## CustomTheme 98 99自定义主题风格对象。 100 101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 102 103| 名称 | 类型 | 只读 | 可选 | 说明 | 104|-------------------------------|-----------------------------------------------------|-----|-----|------------| 105| colors | [CustomColors](#customcolors) | 否 | 是 | 自定义主题颜色资源。</br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 106| darkColors<sup>20+</sup> | [CustomDarkColors](#customdarkcolors20) | 否 | 是 | 自定义深色主题颜色资源。</br>**说明：** 如果未设置darkColors，颜色值将与浅色模式下的colors配置相同，并且不会随着颜色模式的变化而变化，除非该颜色是通过dark目录下的资源进行设置的。</br>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 107 108## CustomColors 109 110type CustomColors = Partial\<Colors> 111 112自定义主题颜色资源类型。 113 114**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 115 116**系统能力：** SystemCapability.ArkUI.ArkUI.Full 117 118| 类型 | 说明 | 119|-----|--------------| 120| Partial<[Colors](#colors)> | 自定义主题颜色资源类型。 | 121 122## CustomDarkColors<sup>20+</sup> 123 124type CustomDarkColors = Partial\<Colors> 125 126自定义深色主题颜色资源类型。 127 128**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 129 130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 131 132| 类型 | 说明 | 133|-----|--------------| 134| Partial<[Colors](#colors)> | 自定义深色主题颜色资源类型。 | 135 136## ThemeControl 137 138ThemeControl将自定义Theme应用于App组件内，实现App组件风格跟随Theme切换。 139 140**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 141 142**系统能力：** SystemCapability.ArkUI.ArkUI.Full 143 144### setDefaultTheme 145 146setDefaultTheme(theme: [CustomTheme](#customtheme)): void 147 148将用户自定义Theme设置应用级默认主题，实现应用风格跟随Theme切换。建议在onWindowStageCreate阶段里windowStage.loadContent的完成时回调中使用，详细代码可参考[设置应用内组件自定义主题色](../../ui/theme_skinning.md#设置应用内组件自定义主题色)。 149 150**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154**参数：** 155 156| 参数名 | 类型 | 必填 | 说明 | 157|--------------|------------------------------|------|----------------| 158| theme | [CustomTheme](#customtheme) | 是 | 表示设置的自定义主题风格。 | 159 160**示例** 161 162```ts 163import { CustomTheme, CustomColors, ThemeControl } from '@kit.ArkUI'; 164// 自定义主题颜色 165class BlueColors implements CustomColors { 166 fontPrimary = Color.Red; 167 backgroundPrimary = Color.Blue; 168 brand = "#FFEEAAFF"; // 品牌色 169} 170 171class PageCustomTheme implements CustomTheme { 172 colors?: CustomColors; 173 174 constructor(colors: CustomColors) { 175 this.colors = colors; 176 } 177} 178// 创建实例 179const BlueColorsTheme = new PageCustomTheme(new BlueColors()); 180// 在页面build之前执行ThemeControl.setDefaultTheme，设置App默认样式风格为BlueColorsTheme。 181ThemeControl.setDefaultTheme(BlueColorsTheme); 182 183@Entry 184@Component 185struct Index { 186 187 build() { 188 Row() { 189 Column() { 190 // 文本颜色应用fontPrimary 191 Text('这是一段文本') 192 .fontSize(30) 193 .fontWeight(FontWeight.Bold) 194 .margin('5%') 195 // 二维码背景色应用backgroundPrimary 196 QRCode('Hello') 197 .width(100) 198 .height(100) 199 // 输入框光标颜色应用brand 200 TextInput({placeholder: 'input your word...'}) 201 .width('80%') 202 .height(40) 203 .margin(20) 204 } 205 .width('100%') 206 } 207 .height('100%') 208 } 209} 210``` 211