Theming
Every block and component uses only the semantic tokens shadcn/ui defines, so your existing theme applies as-is.
| Token | Role |
|---|---|
--background / --foreground | Page surface and text |
--primary / --primary-foreground | Buttons and selected states (black in light mode, white in dark) |
--muted / --muted-foreground | Subtle surfaces and secondary text |
--border / --ring | Hairline borders and focus rings |
--chart-1 … --chart-5 | Data series in charts, calendars and timelines |
--sidebar-* | App sidebars |
Older releases also defined --cocoa, --caramel, --cream, --mint and --glow. They are still present as neutral aliases so old copies keep working, but no block uses them anymore.
All values are OKLCH, so hue shifts keep perceived lightness. Use the theme customizer to generate a full :root / .dark block from a base hue, accent hue, chroma, radius and contrast.
Utilities
bg-grid, bg-dots, glass, mask-fade-x|y|b, shadow-glow, text-balance, text-pretty.
Keyframes
animate-marquee, animate-marquee-vertical, animate-shimmer, animate-float, animate-gradient, animate-border-beam, animate-meteor, animate-aurora, animate-ripple, animate-pulse-ring, animate-caret, animate-spin-slow — plus everything from tw-animate-css.
Dark mode
The theme uses a .dark class on <html>. The site's toggle stores the choice in localStorage and applies it before paint to avoid flashes.