# WithTheme > phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+ WithTheme组件用于设置应用局部页面自定义主题风格，可设置子组件深浅色模式和自定义配色。 > 说明 > > * 该组件从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > > * 本模块接口仅可在Stage模型下使用。 > > * WithTheme支持的系统组件如下：[TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)、[Search](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-search)、[Button](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button)、[Badge](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-badge)、[Swiper](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper)、[Text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text)、[Select](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-select)、[Menu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-menu)、[TimePicker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-timepicker)、[DatePicker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-datepicker)、[TextPicker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textpicker)、[Checkbox](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkbox)、[CheckboxGroup](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-checkboxgroup)、[Radio](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-radio)、[Slider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-slider)、[Progress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-progress)、[QRCode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-qrcode)、[Toggle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-toggle)、[TextClock](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textclock)、[PatternLock](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-patternlock)、[Divider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-divider)。从API版本26.0.0开始，新增[CalendarPicker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-calendarpicker)、[UIPickerComponent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-ui-picker-component)、[TextArea](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textarea)、[属性字符串](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-styled-string)、[Gauge](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-gauge)、[DataPanel](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-datapanel)、[RichEditor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-richeditor)、[MenuItem](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-menuitem)、[MenuItemGroup](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-menuitemgroup)、[Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image)、[ImageAnimator](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-imageanimator)、[Counter](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-counter)、[bindSheet](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sheet-transition#bindsheet)、[LoadingProgress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-loadingprogress)。 > > * WithTheme相关使用指导请参考[设置应用内主题换肤](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/theme-skinning)。 ## 子组件 > phone | 2in1 | tablet | tv | wearable 支持单个子组件。 ## 接口 > phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+ WithTheme(options: WithThemeOptions) 设置应用局部页面自定义主题风格。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** |参数名|类型|必填|说明| |:------|:------------------------------------|:-|:----------| |options|[WithThemeOptions](#withthemeoptions)|是|设置作用域内组件配色。| ## 属性 > phone | 2in1 | tablet | tv | wearable 不支持[通用属性](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-component-general-attributes)。 ## 事件 > phone | 2in1 | tablet | tv | wearable 不支持[通用事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-component-general-events)。 ## WithThemeOptions > phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+ 设置WithTheme作用域内组件缺省样式及深浅色模式。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full |名称|类型|只读|可选|说明| |:--------|:---------------------------------------------------------------------------------------------------------------------------------------------------|:-|:-|:-----------------------------------------------------------------------------------------------------------------------------------------------------| |theme|[CustomTheme](#customtheme)|否|是|用于自定义WithTheme作用域内组件缺省配色。 默认值：undefined，缺省样式跟随系统[token默认样式](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/theme-skinning#系统缺省token色值)。| |colorMode|[ThemeColorMode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-foreground-blur-style#themecolormode枚举说明)|否|是|用于指定WithTheme作用域内组件配色深浅色模式。 默认值：ThemeColorMode.SYSTEM| ## CustomTheme > phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+ type CustomTheme = import('../api/@ohos.arkui.theme').CustomTheme 自定义配色。 **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full |类型|说明| |:--------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------| |import('../api/@ohos.arkui.theme').[CustomTheme](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-theme#customtheme)|自定义WithTheme作用域内组件缺省配色。| ## 示例 > phone | 2in1 | tablet | tv | wearable 设置局部深浅色时，需要添加dark.json资源文件，深浅色模式才会生效。 ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3a/v3/3mJZL-A_RR-q5pt0X-Tl8A/zh-cn_image_0000002768022730.png?HW-CC-KV=V1&HW-CC-Date=20261019T062621Z&HW-CC-Expire=31536000000&HW-CC-Sign=84E84F3F688B3E6D89BF645C5140E16C6A1B4A5F204EAD1D3BC12C26AB43F341) dark.json数据示例： ```ts { "color": [ { "name": "start_window_background", "value": "#000000" } ] } ``` ### 示例1（指定局部深浅色模式） > phone | 2in1 | tablet | tv | wearable ```ts // 指定局部深浅色模式 @Entry @Component struct Index { build() { Column() { // 系统默认 Column() { Text('无WithTheme') .fontSize(40) .fontWeight(FontWeight.Bold) } .justifyContent(FlexAlign.Center) .width('100%') .height('33%') .backgroundColor($r('app.color.start_window_background')) // 设置组件为深色模式 WithTheme({ colorMode: ThemeColorMode.DARK }) { Column() { Text('WithTheme') .fontSize(40) .fontWeight(FontWeight.Bold) Text('DARK') .fontSize(40) .fontWeight(FontWeight.Bold) } .justifyContent(FlexAlign.Center) .width('100%') .height('33%') .backgroundColor($r('sys.color.background_primary')) } // 设置组件为浅色模式 WithTheme({ colorMode: ThemeColorMode.LIGHT }) { Column() { Text('WithTheme') .fontSize(40) .fontWeight(FontWeight.Bold) Text('LIGHT') .fontSize(40) .fontWeight(FontWeight.Bold) } .justifyContent(FlexAlign.Center) .width('100%') .height('33%') .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/1c/v3/lG8u1ryLQyGLO9-yy6V0qg/zh-cn_image_0000002797302679.png?HW-CC-KV=V1&HW-CC-Date=20261019T062621Z&HW-CC-Expire=31536000000&HW-CC-Sign=5366E2FB5964C8C5AECC229AF2EAE5462BC1C584DA9473C8ADDF09121672220D) ### 示例2（自定义WithTheme作用域内组件缺省配色） > phone | 2in1 | tablet | tv | wearable ```ts // 自定义WithTheme作用域内组件缺省配色 import { CustomTheme, CustomColors } from '@kit.ArkUI'; class GreenColors implements CustomColors { fontPrimary = '#ff049404'; fontEmphasize = '#FF00541F'; fontOnPrimary = '#FFFFFFFF'; compBackgroundTertiary = '#1111FF11'; backgroundEmphasize = '#FF00541F'; compEmphasizeSecondary = '#3322FF22'; } class RedColors implements CustomColors { fontPrimary = '#fff32b3c'; fontEmphasize = '#FFD53032'; fontOnPrimary = '#FFFFFFFF'; compBackgroundTertiary = '#44FF2222'; backgroundEmphasize = '#FFD00000'; compEmphasizeSecondary = '#33FF1111'; } class PageCustomTheme implements CustomTheme { colors?: CustomColors constructor(colors: CustomColors) { this.colors = colors } } @Entry @Component struct IndexPage { static readonly themeCount = 3; themeNames: string[] = ['System', 'Custom (green)', 'Custom (red)']; themeArray: (CustomTheme | undefined)[] = [ undefined, // System new PageCustomTheme(new GreenColors()), new PageCustomTheme(new RedColors()) ] @State themeIndex: number = 0; build() { Column() { Column({ space: '8vp' }) { Text(`未使用WithTheme`) // 点击按钮切换局部换肤 Button(`切换theme配色：${this.themeNames[this.themeIndex]}`) .onClick(() => { this.themeIndex = (this.themeIndex + 1) % IndexPage.themeCount; }) // 系统默认按钮配色 Button('Button.style(NORMAL) with System Theme') .buttonStyle(ButtonStyleMode.NORMAL) Button('Button.style(EMP..ED) with System Theme') .buttonStyle(ButtonStyleMode.EMPHASIZED) Button('Button.style(TEXTUAL) with System Theme') .buttonStyle(ButtonStyleMode.TEXTUAL) } .margin({ top: '50vp' }) WithTheme({ theme: this.themeArray[this.themeIndex] }) { // WithTheme作用域 Column({ space: '8vp' }) { Text(`使用WithTheme`) Button('Button.style(NORMAL) with Custom Theme') .buttonStyle(ButtonStyleMode.NORMAL) Button('Button.style(EMP..ED) with Custom Theme') .buttonStyle(ButtonStyleMode.EMPHASIZED) Button('Button.style(TEXTUAL) with Custom Theme') .buttonStyle(ButtonStyleMode.TEXTUAL) } .width('100%') } } } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c0/v3/ny8X6BQzQjaXnnogmNjjjA/zh-cn_image_0000002767862748.gif?HW-CC-KV=V1&HW-CC-Date=20261019T062621Z&HW-CC-Expire=31536000000&HW-CC-Sign=96B00DFF36013118880850BBF9B983108BB78D965272B3CE1181F4CAD09211E1)