Components
instance.update({
appearance: {
theme: "auto", // "light" | "dark" | "auto"
variables: { colorPrimary: "#0a7d5a", borderRadius: "10px", fontFamily: "Inter, system-ui, sans-serif" },
variablesDark: { colorBackground: "#10151c" },
poweredBy: "subtle",
},
});
| Variable | Type | Notes |
|---|---|---|
colorPrimary, colorPrimaryText | colour | Buttons and links, and the text on them |
colorBackground, colorText, colorTextSecondary | colour | Surface and text |
colorDanger, colorBorder, colorRing | colour | Errors, borders, focus ring |
fontFamily | font stack | Up to 8 families, each a registered web font (Inter, Open Sans, Lato, Montserrat, Poppins, DM Sans, Manrope, Figtree, IBM Plex Sans, Source Sans 3, Merriweather, …) or a system/generic family (system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif, …). Any other name is rejected. The components load no font files: a family shows where the viewer's device has it, so end the stack with a generic family |
fontSizeBase | 14px–18px | |
borderRadius | 0px–24px | |
spacingUnit | 3px–6px | Default 4px |
variablesDark overrides variables in dark mode. poweredBy: "hidden" is only honoured if your contract allows it. copy.companyNoun switches "company" to "business".
Safety#
There is no free CSS. Colours are parsed strictly (hex, rgb(), hsl(), oklch() and named colours) and applied as custom properties; anything else is rejected with a warning in the console. Text and background pairs that fail contrast are corrected so the component stays readable.