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 themable 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 colors 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.