Theming
shadcn's token set with Rapid colours, plus success and warning, and subtle, text and border tokens for each status. Any shadcn component works unchanged.
Use the semantic utilities (bg-primary, text-muted-foreground, border-border) in your own code too. Dark mode is enabled by a .dark class on a parent element.
:root {
--primary: #1861f2;
--primary-foreground: #ffffff;
}
.dark {
--primary: #85aeff;
--primary-foreground: #000000;
}Tokens
| Variable | Light | Dark |
|---|---|---|
| --background | #ffffff | #282c2f |
| --foreground | #393a3b | #d6d7d7 |
| --card | #ffffff | #282c2f |
| --card-foreground | #393a3b | #d6d7d7 |
| --popover | #ffffff | #282c2f |
| --popover-foreground | #393a3b | #d6d7d7 |
| --primary | #1861f2 | #85aeff |
| --primary-foreground | #ffffff | #000000 |
| --secondary | #e8effe | #363f4e |
| --secondary-foreground | #1861f2 | #85aeff |
| --muted | #edeeee | #393a3b |
| --muted-foreground | #686973 | #babbbd |
| --accent | #e8effe | #363f4e |
| --accent-foreground | #1861f2 | #85aeff |
| --destructive | #eb0c00 | #eb0c00 |
| --border | #d6d7d7 | #393a3b |
| --input | #86888b | #86888b |
| --ring | #1657da | #85aeff |
| --chart-1 | #d2691e | oklch(0.488 0.243 264.376) |
| --chart-2 | #4b6f9c | oklch(0.696 0.17 162.48) |
| --chart-3 | #3b4c7a | oklch(0.769 0.188 70.08) |
| --chart-4 | #d4a017 | oklch(0.627 0.265 303.9) |
| --chart-5 | #c99a0f | oklch(0.645 0.246 16.439) |
| --radius | 0.625rem | |
| --sidebar | #ffffff | #282c2f |
| --sidebar-foreground | #393a3b | #d6d7d7 |
| --sidebar-primary | #1861f2 | #85aeff |
| --sidebar-primary-foreground | #ffffff | #000000 |
| --sidebar-accent | #e8effe | #363f4e |
| --sidebar-accent-foreground | #1861f2 | #85aeff |
| --sidebar-border | #d6d7d7 | #393a3b |
| --sidebar-ring | #1657da | #85aeff |
| --success | #207e38 | #8fdca4 |
| --success-foreground | #ffffff | #0b1f12 |
| --warning | #895916 | #f5c97a |
| --warning-foreground | #ffffff | #241703 |
| --info-subtle | #e8effe | #363f4e |
| --info-subtle-foreground | #1045a8 | #ccddff |
| --info-border | #abc6fb | #576d97 |
| --success-subtle | #ebf9ee | #1f3325 |
| --success-subtle-foreground | #207e38 | #8fdca4 |
| --success-border | #c0eecc | #3f6b4d |
| --warning-subtle | #fff4e6 | #3d3320 |
| --warning-subtle-foreground | #895916 | #f5c97a |
| --warning-border | #ffdeb0 | #7a6132 |
| --destructive-subtle | #ffebea | #3a1f1d |
| --destructive-subtle-foreground | #db0b00 | #ff9b95 |
| --destructive-border | #ffb1ad | #6b2f2b |