Customizing

  1. Custom themes
  2. When to use custom themes
  1. Custom themes
  2. When to use custom themes

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:

Example

Call to action You can also set a color palette on a specific element

HTML

Copy to Clipboard

CSS

Copy to Clipboard

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. ke m

  • 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.

Example of a hero that uses light blue tags against a background image

Other libraries

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