Theme Designer

Edit theme values and watch every component update instantly — changes are applied as --z-* CSS custom properties on the root element via applyTheme().

Base themePrimaryPrimary hoverPrimary textBackgroundForegroundSurfaceBorderFocus ringDangerRadius

createTheme(lightTheme, {
  "colors": {},
  "radius": "0.375rem"
})

Live preview

Surface card using var(--z-surface) / var(--z-border) / var(--z-radius).