Customizing
On this page
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
- This card uses a custom theme
- Links also are affected
- See how it reacts when you change the color-palette
HTML
CSS
--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.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.