# Theming

var-ui themes are TypeStyles surfaces: semantic CSS custom properties, readable
public class names (plus `data-*` variant attrs), and cascade layers. Switch
light and dark from the header to see tokens respond.

## How to customize (pick the right layer)

1. **`createDesignTheme` + `theme.componentStyles(recipe, override)`** — primary path.
   Mint custom mode-aware tokens and restyle any recipe with full CSS and typed
   variant names. No class names in your theme code.
2. **Component CSS variables** — cheapest single-property tweak when a recipe
   already exposes a `c.vars()` hook (e.g. `--var-ui-button-background`).
3. **Public classes / `styles.scope()`** — escape hatch for nested conflicting
   themes (`@scope`) or one-off CSS outside the theme config.

See **[Customize](/theming/customize)** for the full story, **[Themes](/theming/themes)**
for authoring and applying a theme, and **[Design tokens](/theming/tokens)** for
the built-in token map.

## Topics

- [Customize](/theming/customize) — config DX, `extendTokens`, `styles.override`
- [Themes](/theming/themes) — `createDesignTheme`, `DesignSystemProvider`
- [Design tokens](/theming/tokens) — semantic colors, space, type
- [CSS variables](/theming/css-variables) — custom property reference and usage