Developers

Using the theming system

RHDS’s theming system is a high-level expression of the lower-level components of the system: tokens, and elements. In turn, it factors into the development of the highest-level design system component: patterns. To use the theming system, then, developers must already be familiar with our tokens and elements. In other words, theming is the developer’s process of orchestrating design tokens with elements, particularly by way of themable container elements.

How theming works

Color scheme providers

Read more about color palettes and schemes in the theming overview.

To make your element a color scheme provider:

1. Import the provider decorator from the lib directory.
2. Add the @colorPalettes decorator to the element's class.
3. Add a reflecting colorPalette property with color-palette attribute.