Theming

Components read CSS custom properties for colors, spacing and sizes. This page is generated at build time from the library source, so it lists 628 variables across 52 components and modules, and 13 shared tokens. Set a variable on the component (most forward style and class to their root element) or on any ancestor:

:root {
  --text-color: light-dark(#222, #eee);
  --tooltip-bg: light-dark(#fff, #2a2a2e);
}

The default column shows the value a component uses when a variable is unset: its var() fallbacks, or a declared value the component sets on its own root element, which you override there rather than on an ancestor. A note flags variables the component sets at runtime (from props or measurements), which may override yours, and values derived from other variables, whose inputs you can override instead.

Shared tokens

Read by 3 or more components, so one declaration restyles all of them.