Theme Colors: OKLCH
The color system is based on OKLCH for perceptual consistency. Below you can find the variable names, OKLCH values and usage examples. Below are all theme color tokens from globals.css. These values reflect your current theme mode (light/dark).
| Token | Preview | Tailwind/Inline Usage | OKLCH |
|---|
How to Use
Apply these tokens using Tailwind’s bracket notation or inline styles:
<div className="bg-[var(--primary)] text-[var(--primary-foreground)]" /><div style={{ backgroundColor: 'var(--chart-2)' }} />