Theming
How UI Lab's token system works — color families, shade ranges, dark mode inversion, and dynamic accent customization.
Theming
UI Lab is built on a semantic token system backed by OKLCH — a perceptually-uniform color space. Every color decision routes through CSS custom properties, so swapping themes or customizing the accent is a one-line change.
Consumers usually own the token layer in their app's theme.css. With Tailwind v4, the normal setup is:
theme.css defines your app tokens and mode rules. ui-lab-components/styles.css consumes those active --color-* tokens. You do not need a tailwind.config.ts content extension step for this integration.
How the token pipeline works
Color families
Each family has a bounded shade range:
| Family | Shade range | Direction | Use for |
|---|---|---|---|
background | 500–950 | 500 = lightest surface | Page, card, container backgrounds |
foreground | 50–400 | 50 = lightest text | Text, borders, icons, labels |
accent | 50–600 | 600 = strongest | Primary actions, CTAs, links |
success | 50–600 | 600 = strongest | Confirmations, positive states |
danger | 50–600 | 600 = strongest | Errors, destructive actions |
warning | 50–600 | 600 = strongest | Cautions, pending states |
info | 50–600 | 600 = strongest | Neutral information |
Dark mode inversion
There is no dark: prefix in UI Lab. Shades invert automatically when the theme switches:
Applying tokens
To make Tailwind utilities point at your live token values, map them in @theme inline inside your app-owned theme.css:
Tailwind classes
CSS variables
Customizing the accent color
The accent family is designed for dynamic customization. Override it in your app-owned theme.css:
All components that use accent-* tokens pick up the change automatically — no component code changes needed.
Common mistakes
| Wrong | Correct |
|---|---|
bg-white | bg-background-500 |
text-gray-900 | text-foreground-400 |
bg-zinc-100 | bg-background-600 |
bg-background-50 | bg-background-500 — min shade is 500 |
text-foreground-500 | text-foreground-400 — max shade is 400 |
bg-accent-700 | bg-accent-600 — max shade is 600 |
border-red-500 | border-danger-500 |
Further reading
- Colors — full OKLCH palette reference with all shade values
- Design Tokens — complete token reference for spacing, typography, and motion
- Variables — all CSS custom properties and their defaults