• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# WithTheme
2
3The **WithTheme** component is designed to customize the theme style for a specific part of an application page. It allows for the setting of light and dark modes for child components, as well as the use of custom color schemes.
4
5> **NOTE**
6>
7> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11This component supports only one child component.
12
13## APIs
14
15WithTheme(options: WithThemeOptions)
16
17**Atomic service API**: This API can be used in atomic services since API version 12.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name                           | Type                                 | Mandatory | Description    |
24|--------------------------------|---------------------------------------|-----|---------------|
25| options | [WithThemeOptions](#withthemeoptions) | Yes  | Color scheme for components within the scope.|
26
27## Attributes
28
29The [universal attributes](ts-component-general-attributes.md) are not supported.
30
31## Events
32
33The [universal events](ts-component-general-events.md) are not supported.
34
35## WithThemeOptions
36
37Defines the default theme and color mode for components within the **WithTheme** scope.
38
39**Atomic service API**: This API can be used in atomic services since API version 12.
40
41**System capability**: SystemCapability.ArkUI.ArkUI.Full
42
43| Name       | Type                              | Mandatory| Description               |
44|------------------------|---------------------------------------------------------| ---- |------------------------------------------------------------------|
45| theme     | [CustomTheme](#customtheme)    | No  | Default theme for components in the **WithTheme** scope.<br> Default value: **undefined**, indicating that the styles will follow the system's default theme.|
46| colorMode | [ThemeColorMode](#themecolormode10) | No  | Color mode for components in the **WithTheme** scope.<br>Default value: **ThemeColorMode.System**      |
47
48## CustomTheme
49
50type CustomTheme = CustomTheme
51
52Defines a custom theme.
53
54**Atomic service API**: This API can be used in atomic services since API version 12.
55
56**System capability**: SystemCapability.ArkUI.ArkUI.Full
57
58| Type    | Description      |
59| ------ | ---------- |
60| [CustomTheme](../js-apis-arkui-theme.md#customtheme)  | Default theme for components in the **WithTheme** scope.|
61
62## ThemeColorMode<sup>10+</sup>
63
64**Atomic service API**: This API can be used in atomic services since API version 11.
65
66**System capability**: SystemCapability.ArkUI.ArkUI.Full
67
68| Name    | Description      |
69| ------ | ---------- |
70| SYSTEM | System color mode.|
71| LIGHT  | Light color mode. |
72| DARK   | Dark color mode. |
73
74## Example
75
76This example demonstrates how to use **WithTheme** to set the color mode, which is effective only when a **dark.json** resource file is included.
77
78![resources_dark](figures/resources_dark.png)
79
80Example of the **dark.json** file content:
81  ```ts
82    {
83      "color": [
84        {
85          "name": "start_window_background",
86          "value": "#FFFFFF"
87        }
88      ]
89    }
90  ```
91
92```ts
93// Specify the local color mode.
94@Entry
95@Component
96struct Index {
97  build() {
98    Column() {
99    // System default
100      Column() {
101        Text('WithTheme not used')
102          .fontSize(40)
103          .fontWeight(FontWeight.Bold)
104      }
105      .justifyContent(FlexAlign.Center)
106      .width('100%')
107      .height('33%')
108      .backgroundColor($r('sys.color.background_primary'))
109      // Set the component to the dark mode.
110      WithTheme({ colorMode: ThemeColorMode.DARK }) {
111        Column() {
112          Text('WithTheme')
113            .fontSize(40)
114            .fontWeight(FontWeight.Bold)
115          Text('DARK')
116            .fontSize(40)
117            .fontWeight(FontWeight.Bold)
118        }
119        .justifyContent(FlexAlign.Center)
120        .width('100%')
121        .height('33%')
122        .backgroundColor($r('sys.color.background_primary'))
123      }
124      // Set the component to the light mode.
125      WithTheme({ colorMode: ThemeColorMode.LIGHT }) {
126        Column() {
127          Text('WithTheme')
128            .fontSize(40)
129            .fontWeight(FontWeight.Bold)
130          Text('LIGHT')
131            .fontSize(40)
132            .fontWeight(FontWeight.Bold)
133        }
134        .justifyContent(FlexAlign.Center)
135        .width('100%')
136        .height('33%')
137        .backgroundColor($r('sys.color.background_primary'))
138      }
139    }
140    .height('100%')
141    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.END, SafeAreaEdge.BOTTOM, SafeAreaEdge.START])
142  }
143}
144```
145![withThemeColorMode](figures/witheThemeColorMode.png)
146
147```ts
148// Customize the default theme for components in the WithTheme scope.
149import { CustomTheme, CustomColors } from '@kit.ArkUI';
150
151class GreenColors implements CustomColors {
152  fontPrimary = '#ff049404';
153  fontEmphasize = '#FF00541F';
154  fontOnPrimary = '#FFFFFFFF';
155  compBackgroundTertiary = '#1111FF11';
156  backgroundEmphasize = '#FF00541F';
157  compEmphasizeSecondary = '#3322FF22';
158}
159
160class RedColors implements CustomColors {
161  fontPrimary = '#fff32b3c';
162  fontEmphasize = '#FFD53032';
163  fontOnPrimary = '#FFFFFFFF';
164  compBackgroundTertiary = '#44FF2222';
165  backgroundEmphasize = '#FFD00000';
166  compEmphasizeSecondary = '#33FF1111';
167}
168
169class PageCustomTheme implements CustomTheme {
170  colors?: CustomColors
171
172  constructor(colors: CustomColors) {
173    this.colors = colors
174  }
175}
176
177@Entry
178@Component
179struct IndexPage {
180  static readonly themeCount = 3;
181  themeNames: string[] = ['System', 'Custom (green)', 'Custom (red)'];
182  themeArray: (CustomTheme | undefined)[] = [
183    undefined, // System
184    new PageCustomTheme(new GreenColors()),
185    new PageCustomTheme(new RedColors())
186  ]
187  @State themeIndex: number = 0;
188
189  build() {
190    Column() {
191      Column({ space: '8vp' }) {
192        Text('WithTheme not used')
193        // Click the button to change the theme.
194        Button(`Switch Theme: ${this.themeNames[this.themeIndex]}`)
195          .onClick(() => {
196            this.themeIndex = (this.themeIndex + 1) % IndexPage.themeCount;
197          })
198
199        // Default button color
200        Button('Button.style(NORMAL) with System Theme')
201          .buttonStyle(ButtonStyleMode.NORMAL)
202        Button('Button.style(EMP..ED) with System Theme')
203          .buttonStyle(ButtonStyleMode.EMPHASIZED)
204        Button('Button.style(TEXTUAL) with System Theme')
205          .buttonStyle(ButtonStyleMode.TEXTUAL)
206      }
207      .margin({
208        top: '50vp'
209      })
210
211      WithTheme({ theme: this.themeArray[this.themeIndex] }) {
212        // WithTheme scope
213        Column({ space: '8vp' }) {
214          Text('WithTheme used')
215          Button('Button.style(NORMAL) with Custom Theme')
216            .buttonStyle(ButtonStyleMode.NORMAL)
217          Button('Button.style(EMP..ED) with Custom Theme')
218            .buttonStyle(ButtonStyleMode.EMPHASIZED)
219          Button('Button.style(TEXTUAL) with Custom Theme')
220            .buttonStyle(ButtonStyleMode.TEXTUAL)
221        }
222        .width('100%')
223      }
224    }
225  }
226}
227```
228![withThemeSystem](figures/withThemeChangeTheme.gif)
229