Theming
CSS variables and light / dark themes.
Switch themes by toggling default-light / default-dark on a root node, usually html.
All tokens
| Token | Purpose |
|---|---|
--primary | Brand fill |
--primary-50 / --primary-70 | Brand with alpha (~41% / ~29%) |
--primary-foreground | Text / icons on brand |
--secondary | Secondary surface |
--secondary-50 / --secondary-70 | Secondary with alpha |
--secondary-foreground | Text on secondary |
--bg-base | Page background |
--bg-base-50 / --bg-base-70 | Page background with alpha |
--bg-container | Raised / control surface |
--border-base | Default border |
--border-base-50 / --border-base-70 | Border with alpha |
--text-base | Primary text |
--text-muted | Secondary / help text |
--danger | Error / destructive |
--success | Success |
--warning | Warning |
--pending | Pending / info accent |
--3d-shadow | Inset bevel shadow |
--ring-shadow | Default elevation ring |
--ring-shadow-hover | Hover elevation ring |
--ring-shadow-focus | Focus ring (uses --primary) |
Override brand
Code
:root {
--primary: #2563eb;
--primary-50: #2563eb69;
--primary-70: #2563eb49;
--primary-foreground: #ffffff;
--secondary: #fafafa;
--secondary-50: #fafafa69;
--secondary-70: #fafafa49;
--secondary-foreground: #18181b;
--bg-base: #ffffff;
--bg-base-50: #ffffff69;
--bg-base-70: #ffffff49;
--bg-container: #fafafa;
--border-base: #d5d5d7;
--border-base-50: #d5d5d769;
--border-base-70: #d5d5d749;
--text-base: #18181b;
--text-muted: #52525b;
--danger: #f43f5e;
--success: #10b981;
--warning: #f97316;
--pending: #3b82f6;
}