Overview

The Red Hat Design System features a powerful, flexible, and easy-to-use theming system.

What is theming?

We use theming to modify our elements and patterns so they fit a specific visual style. Themes can be applied to an element, a page, or a UI. A common theming use case is dark theme or dark mode.

How does it work?

Our design system includes built-in branded and accessible defaults, so all you need to do if you want to create digital experiences that feel like Red Hat is to write a few lines of HTML.

When we want to flex our design muscles, our elements include powerful theming primitives in the form of slots, design tokens, and CSS shadow parts. These primitives enable you to theme a single element, section, page, or entire app UI.