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({ extend, components }) — 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 for the full story, Themes for authoring and applying a theme, and Design tokens for the built-in token map.

Topics

• Customize — config DX, extendTokens, styles.override
• Themes — createDesignTheme, DesignSystemProvider
• Design tokens — semantic colors, space, type
• CSS variables — custom property reference and usage