@ohos.arkui.theme(Theme)

You can define a custom theme to apply to components in your application.

NOTE

The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version.

Modules to Import

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

Theme

Defines the Theme object in use, which can be obtained through onWillApplyTheme.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
colors	Colors	No	No	Color resources of the theme.

Colors

Defines the color resources of a theme.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Readable	Writable	Description
brand	ResourceColor	No	No	Brand color.
warning	ResourceColor	No	No	Warning color.
alert	ResourceColor	No	No	Alert color.
confirm	ResourceColor	No	No	Confirmation color.
fontPrimary	ResourceColor	No	No	Primary font color.
fontSecondary	ResourceColor	No	No	Secondary font color.
fontTertiary	ResourceColor	No	No	Tertiary font color.
fontFourth	ResourceColor	No	No	Fourth-level font color.
fontEmphasize	ResourceColor	No	No	Emphasis font color.
fontOnPrimary	ResourceColor	No	No	Primary inverted font color used on color background.
fontOnSecondary	ResourceColor	No	No	Secondary inverted font color used on color background.
fontOnTertiary	ResourceColor	No	No	Tertiary inverted font color used on color background.
fontOnFourth	ResourceColor	No	No	Fourth-level inverted font color used on color background.
iconPrimary	ResourceColor	No	No	Primary icon color.
iconSecondary	ResourceColor	No	No	Secondary icon color.
iconTertiary	ResourceColor	No	No	Tertiary icon color.
iconFourth	ResourceColor	No	No	Fourth-level icon color.
iconEmphasize	ResourceColor	No	No	Emphasis icon color.
iconSubEmphasize	ResourceColor	No	No	Color of the emphasis auxiliary icon.
iconOnPrimary	ResourceColor	No	No	Primary inverted icon color used on color background.
iconOnSecondary	ResourceColor	No	No	Secondary inverted icon color used on color background.
iconOnTertiary	ResourceColor	No	No	Tertiary inverted icon color used on color background.
iconOnFourth	ResourceColor	No	No	Fourth-level inverted icon color used on color background.
backgroundPrimary	ResourceColor	No	No	Primary background color (solid, opaque).
backgroundSecondary	ResourceColor	No	No	Secondary background color (solid, opaque).
backgroundTertiary	ResourceColor	No	No	Tertiary background color (solid, opaque).
backgroundFourth	ResourceColor	No	No	Fourth-level background color (solid, opaque).
backgroundEmphasize	ResourceColor	No	No	Emphasis background color (solid, opaque).
compForegroundPrimary	ResourceColor	No	No	Foreground.
compBackgroundPrimary	ResourceColor	No	No	White background.
compBackgroundPrimaryTran	ResourceColor	No	No	White transparent background.
compBackgroundPrimaryContrary	ResourceColor	No	No	Always-on background.
compBackgroundGray	ResourceColor	No	No	Gray background.
compBackgroundSecondary	ResourceColor	No	No	Secondary background.
compBackgroundTertiary	ResourceColor	No	No	Tertiary background.
compBackgroundEmphasize	ResourceColor	No	No	Emphasis background.
compBackgroundNeutral	ResourceColor	No	No	Black, neutral, emphasis background.
compEmphasizeSecondary	ResourceColor	No	No	20% emphasis background color.
compEmphasizeTertiary	ResourceColor	No	No	10% emphasis background color.
compDivider	ResourceColor	No	No	Common divider color.
compCommonContrary	ResourceColor	No	No	Common inverted color.
compBackgroundFocus	ResourceColor	No	No	Background color in the focused state.
compFocusedPrimary	ResourceColor	No	No	Primary inverted color in the focused state.
compFocusedSecondary	ResourceColor	No	No	Secondary inverted color in the focused state.
compFocusedTertiary	ResourceColor	No	No	Tertiary inverted color in the focused state.
interactiveHover	ResourceColor	No	No	Common interactive color for the hover state.
interactivePressed	ResourceColor	No	No	Common interactive color for the pressed state.
interactiveFocus	ResourceColor	No	No	Common interactive color for the focused state.
interactiveActive	ResourceColor	No	No	Common interactive color for the active state.
interactiveSelect	ResourceColor	No	No	Common interactive color for the selected state.
interactiveClick	ResourceColor	No	No	Common interactive color for the clicked state.

CustomTheme

Defines a custom theme object.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read Only	Optional	Description
colors	CustomColors	No	Yes	Color resources of the custom theme.

CustomColors

type CustomColors = Partial<Colors>

Defines the color resources of a custom theme.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
Partial<Colors>	Color resources of the custom theme.

ThemeControl

Implements a ThemeControl object to apply the custom theme to the components in the application.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

setDefaultTheme

setDefaultTheme(theme: CustomTheme): void

Sets a custom theme as the default, application-level theme so that it is applied to components in the application.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
theme	CustomTheme	Yes	Custom theme to set.

Example

import { CustomTheme, CustomColors, ThemeControl } from '@kit.ArkUI';
// Custom theme color
class BlueColors implements CustomColors {
  fontPrimary = Color.White;
  backgroundPrimary = Color.Blue;
  brand = Color.Blue; // Brand color
}

class PageCustomTheme implements CustomTheme {
  colors?: CustomColors;

  constructor(colors: CustomColors) {
    this.colors = colors;
  }
}
// Create an instance.
const BlueColorsTheme = new PageCustomTheme(new BlueColors());
// Call ThemeControl.setDefaultTheme before page build to set the default application style to BlueColorsTheme.
ThemeControl.setDefaultTheme(BlueColorsTheme);