Theme builder
Build, preview and save an embedded component theme.
NameTesouro
Basic theming: your brand color, corner radius and font. Most themes need nothing else.
Brand color
Radius
Corners on cards, buttons and fields.
Font
Advanced: every color
Surfaces, status tones, accents and the modal overlay. Each tone is one color; the badge fill and its text are derived from it.
Change colors
Each pair is a fill and the text on it.
Lines
Status tones
Info, success, warning and destructive. The tile shows the badge each one makes.
Accents
Overlay
The scrim behind dialogs and sheets. Any CSS color, usually translucent.
Compatibility
Kept for existing integrations and due to be removed in a future major version. Unset, surface-subtle follows muted and each sidebar color follows its base color. New themes leave these alone.
CSS
Add these variables to your app's CSS to theme every embedded component.
:root {
--ttw-background: #ffffff;
--ttw-foreground: #18181b;
--ttw-card: #ffffff;
--ttw-card-foreground: #18181b;
--ttw-popover: #ffffff;
--ttw-popover-foreground: #18181b;
--ttw-primary: #432dd7;
--ttw-primary-foreground: #ffffff;
--ttw-secondary: #eceafb;
--ttw-secondary-foreground: #18181b;
--ttw-muted: #f6f5fd;
--ttw-muted-foreground: #52525b;
--ttw-accent: #ddd9f8;
--ttw-accent-foreground: #18181b;
--ttw-border: #e4e4e7;
--ttw-input: #e4e4e7;
--ttw-ring: #432dd7;
}