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 in their page's CSS. For example, let's create a custom Bordeaux theme. We'll write a CSS rule which selects for the theme-bordeaux class, and in that rule we'll set the values of RHDS theming tokens to our custom theme colors. In the following example, you can see how we first define some custom theme colours as CSS custom properties beginning with --bordeaux-, then we use those values in our custom theme by applying them to RHDS theming tokens.

In order to support user's color scheme preference as well as elements with dark color palettes, always use sure to always use the light-dark() function when crafting custom themes.

When writing themes, override the semantic, themeable tokens such as --rh-color-interactive-primary-default rather than the crayon tokens e.g. --rh-color-purple-10. This ensures that your custom colors apply to elements in the way the designers originally intended

Customizing entire pages

To customize entire page, we can apply the theme-bordeaux class to the body element.

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

Have you written a custom theme for RHDS? Brag about it! Let us know in slack, show it off on your blog.

When to use custom themes

A custom theme may be used for very specific brand projects like campaigns, podcasts, or events. For other applications, the default theme is already perfectly weighted. If your project does need a custom theme, contact the Brand team and Design system team for guidance.

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.