Customizing

Red Hat Design System is composed of tokens, elements, and patterns, each layer building on the last. Theming emerges as a design possibility from the composition of those smaller pieces. By setting custom values for themeable design tokens, elements, sections, or entire pages can take on a new color scheme, layout density, etc. Custom themes can apply to multiple color-palettes and to both the light and dark backgrounds.

Custom themes

To create a custom theme, designers and developers need only set the values for the relevant color properties in the design system. For example, a Bordeaux theme might look like this:

When writing themes, use the semantic, themeable tokens such as --rh-color-interactive-primary-default-on-light rather than the crayon tokens e.g. --rh-color-purple-10.

Careful!

Do not set the "computed" theme tokens, e.g. --rh-color-interactive-primary-default, those will always be calculated for you from their -on-light and -on-dark versions.

What would it look like to set that theme on an entire page?

• set token values on :root for whole pages, or on a selector for a class (e.g. 3-card promo band)
• brag about your customizations! did other teams use it, or something similar? maybe it should be added upstream to the design system?

When to use custom themes

A custom theme may be used for very specific brand projects like campaigns. However, the light and dark themes are fine for the majority of other projects. If your project does need a custom theme, contact the Brand team and Design system team for guidance. A custom theme may feature a bespoke color palette, but try to use other styles with elements and patterns from the design system if possible.

Choosing a theme

For most projects, the light and dark themes are good enough. Evaluate your project thoroughly before creating a custom theme.

Other libraries

To learn more about our other libraries, visit the getting started page.