Theming

Semantic tokens drive every color, radius and density. Change a token, and every component follows.

Light, dark and system

Set data-theme on the root element. The playground resolves a saved preference before first paint so there is no flash. Storage can be unavailable; the app keeps working.

Theme attributes

<html data-theme="dark" data-density="compact">
  …
</html>

Tokens

Roles are background, surface, elevated, muted, border, accent and brand, plus status colors and six chart colors. Text meets WCAG AA; control boundaries and focus meet 3:1.

Density

Comfortable controls are 36px and compact controls are 32px. Touch devices always get 44px targets.