Style a component with a theme
In XM Cloud Components, you build and manage themes in the Styles builder. Themes saved in the Styles library let you style an entire component in just one click.
In addition to picking a theme for a component, you can customize the theme by changing the style of a category of element (for example, all cards, or all image blocks) included in the theme.
It is also possible to change the style and customize one specific element at a time in a component.
Pick a theme for the component
Themes are made of a combination of pre-created elements and style rules. Their main purpose is to improve the components' styling process by applying multiple styles at once, for example, by applying light sections, dark cards, light text blocks, and specific pill styles in just one click.
To style a component using a theme:
-
In the Components library, click the component you want to style.
-
In the Components builder, in the top-right corner of the version you want to style, click Current theme
.
-
In the right-hand pane, on the Themes tab, click the theme you want for the version.
The component is now styled following the chosen theme.
Customize a theme
You can customize a theme by choosing an alternative style for a category of elements. This is only possible if your theme has been previously built with alternative styles in addition to the default style. Alternative styles are available by clicking 
in the theme picker.
To customize a theme for a specific version of a component:
-
In the Components builder, click the version you want to customize.
-
In the top-right corner of the version, click Current theme
. -
In the right-hand pane, click Customize
. -
Click
for the element type you want to customize. -
In the Allowed styles list, click on the style you want to use for this element type in this component.
In the Element customization overview, styles that have been customized are highlighted in light green.
The customization only applies to the theme applied to a specific component. Applying another theme to the component removes all your customization. The customization is also not transferred to another component or version using the same theme.