Skip to main content

Theming

Foundations

How data-theme + semantic tokens give one component set any number of looks — the two reference themes (light, dark), a theme you author yourself, plus the orthogonal decoration / density / motion dials.

Open in StorybookSource

Examples

9 live examples

Root setup

The `ThemeProvider` root-mount props as a REAL story with Controls — not only the toolbar switcher demo above, which drives Storybook's own globals and never touches an actual `ThemeProvider` instance. Open the **Controls** panel on this story and every value maps to a real prop on a scoped `ThemeProvider` rendered below.

Shipped themes

Shipping a subset of the themes

Bring your own theme

Create or update a theme

Runtime token overrides

Derive theme from one colour

Orthogonal dials