appearance object styles every element. Pass it globally at construction, per group at create() (or as React props), and change it live at any point with update({ appearance }) — mounted elements restyle in place.
Theme
The high-level design tokens. Every field is optional and fully typed — the values below are enumerated from the source types:"light" | "dark"
The color scheme to use. -
"light" - Light mode with dark text on light backgrounds - "dark" - Dark mode with light text on dark backgroundsAccentColor
The primary accent color used for interactive elements. One of
ruby, blue, red, yellow, green, gray, tomato, crimson, pink, plum, purple, violet, iris, cyan, teal, jade, grass, brown, orange, indigo, sky, mint, amber, lime, lemon, magenta, gold, bronze."gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "auto"
The gray color palette to use for neutral elements. Use
"auto" to automatically match the accent color."ruby" | "red" | "tomato"
The color used for error states and destructive actions.
"yellow" | "amber"
The color used for warning states.
"green" | "teal" | "jade" | "grass"
The color used for success states.
"sky" | "blue"
The color used for informational states.
Variables
CSS custom properties (variables) that can be used to customize element styles. Keys must start with-- prefix.
Classes
Style declarations per targetablewhop-* class name — each entry restyles one documented part of an element (see the element’s Styling section for its class list). The declarations are sanitized and injected INSIDE the element’s frame; page stylesheets cannot reach it.
A style declaration object — CSS properties to values, React-CSSProperties-style. Property names may be camelCase (fontWeight) or kebab-case (font-weight); both are normalized and checked against the safe-property allowlist before being applied.