Compose a theme
Composing themes is the last step of building an atomic styles library in XM Cloud Components.
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.
Add a theme
To add a theme to your style library:
-
In the Styles builder, in the left pane, click Themes.
-
Click Add theme.
-
Enter a name for your theme.
-
On the tabs Block elements, Inline elements, and Text elements, add styles for the various elements. For example, on the Block elements tab, click Add section to add a new style for sections, then pick the desired rules from the drop-down menu when available.
-
For each element, you can add more than one style. In you do this, choose one of the styles to be the default style.
-
To save the theme to the Styles library, click Save.
A theme saved in the Styles library is then available in the style picker of the Components builder. When picking a theme, the default styles selected are automatically applied to all the elements of the component version. You can, however, style or customize any element of the theme directly in the Components builder by choosing one of the predefined alternative styles.