Getting started
Theming
The theme extends shadcn tokens with race semantics. Each token has a light and dark value, so components adapt to the class on <html>.
Broadcast tokens
| Token | Light | Dark |
|---|---|---|
| --sector-fastest | oklch(0.57 0.22 305) | oklch(0.57 0.22 305) |
| --sector-fastest-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --sector-personal | oklch(0.52 0.16 150) | oklch(0.55 0.16 150) |
| --sector-personal-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --sector-slower | oklch(0.55 0.13 85) | oklch(0.82 0.16 95) |
| --sector-slower-foreground | oklch(1 0 0) | oklch(0.18 0 0) |
| --sector-unset | oklch(0.55 0 0) | oklch(0.55 0 0) |
| --sector-unset-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --status-pit | oklch(0.57 0.23 28) | oklch(0.57 0.23 28) |
| --status-pit-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --status-lapped | oklch(0.51 0.17 255) | oklch(0.51 0.17 255) |
| --status-lapped-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --tyre-soft | oklch(0.57 0.23 28) | oklch(0.57 0.23 28) |
| --tyre-soft-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --tyre-medium | oklch(0.82 0.16 95) | oklch(0.82 0.16 95) |
| --tyre-medium-foreground | oklch(0.18 0 0) | oklch(0.18 0 0) |
| --tyre-hard | oklch(0.93 0 0) | oklch(0.93 0 0) |
| --tyre-hard-foreground | oklch(0.18 0 0) | oklch(0.18 0 0) |
| --tyre-inter | oklch(0.55 0.16 150) | oklch(0.55 0.16 150) |
| --tyre-inter-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --tyre-wet | oklch(0.51 0.17 255) | oklch(0.51 0.17 255) |
| --tyre-wet-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --flag-green | oklch(0.52 0.16 150) | oklch(0.55 0.16 150) |
| --flag-green-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --flag-yellow | oklch(0.82 0.16 95) | oklch(0.82 0.16 95) |
| --flag-yellow-foreground | oklch(0.18 0 0) | oklch(0.18 0 0) |
| --flag-red | oklch(0.57 0.23 28) | oklch(0.57 0.23 28) |
| --flag-red-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --flag-blue | oklch(0.51 0.17 255) | oklch(0.51 0.17 255) |
| --flag-blue-foreground | oklch(1 0 0) | oklch(1 0 0) |
| --flag-chequered-a | oklch(0.97 0 0) | oklch(0.97 0 0) |
| --flag-chequered-a-foreground | oklch(0.12 0 0) | oklch(0.12 0 0) |
| --flag-chequered-b | oklch(0.12 0 0) | oklch(0.12 0 0) |
| --flag-chequered-b-foreground | oklch(0.97 0 0) | oklch(0.97 0 0) |
| --font-display | 'Titillium Web', ui-sans-serif, system-ui, sans-serif | 'Titillium Web', ui-sans-serif, system-ui, sans-serif |
| --font-mono | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace |
Override a token
Override a semantic value after installing the theme:
.dark {
--sector-fastest: oklch(0.65 0.18 305);
}Components only use --font-display and --font-mono for typography. Set those variables to use your own fonts.