Colors, status colors, radius and dark mode — all CSS variables you can change.
Tokens
Every color, the corner radius and all motion are CSS variables in globals.css, mapped to Tailwind utilities — bg-primary, text-muted-foreground, rounded-lg. Components only use tokens, so changing one changes them all. The names follow shadcn/ui, so other shadcn components fit in. The theme you add starts with a blue primary, as every preview on this site does.
Status colors
Each status has three tokens: a fill (bg-success), the text on that fill (text-success-foreground), and a text color for use on the page (text-success-text) that keeps WCAG AA contrast in both themes. Soft styles use the fill at low opacity: bg-success/12 text-success-text.
primary
Main actions, links, focus
info
Information and tips
success
Done, healthy, up
warning
Needs attention
destructive
Errors and deleting
highlight
Something special
Chart colors
--chart-1 to --chart-5 are a colorblind-safe order for charts with several series; a single series uses --primary. --chart-grid and --chart-axis keep grid lines and labels quiet.
Gradient
--gradient-from, --gradient-via and --gradient-to are three neighboring hues around the primary (sky, blue and indigo for the default blue; silver for black), for accents such as a gradient hairline or a tinted tag;--gradient-ink is the text color that reads on a faint tint of them. Change the primary, change these with it.
Dark mode
Dark values live under .dark. Put the class on <html> — with next-themes, attribute="class" — and every component follows. Try the toggle in the header.
Presets
@dashral/ui/themes.css holds ready looks as data attributes: data-primary (blue, indigo, purple, green, amber, rose, each with its gradient), data-light, data-dark, data-card (soft, shadow), data-font and data-radius. Import it after the theme, then put the attributes on <html> to style the whole app, or on any element to style only what's inside it. Their choices, and six presets, are data in @dashral/ui/lib/themes.
To try them, open Customize the previews (the brush in the header) on any component or block page: every live preview wears the look you pick, and Copy theme gives it to you as plain CSS variables to paste instead.
@import "@dashral/ui/globals.css";
@import "@dashral/ui/themes.css";
/* then, in your layout: <html data-primary="green" data-radius="xl"> */Make it yours
Override tokens after importing the theme. Change both modes, and keep the text tokens readable:
:root {
--primary: oklch(0.55 0.2 150); /* green */
--primary-text: oklch(0.45 0.17 150);
/* Its gradient: teal → green → lime, and an ink for text on a tint of it */
--gradient-from: oklch(0.8 0.1 185);
--gradient-via: oklch(0.62 0.15 150);
--gradient-to: oklch(0.8 0.14 125);
--gradient-ink: oklch(0.42 0.11 150);
--radius: 0.375rem;
}
.dark {
--primary: oklch(0.65 0.19 150);
--primary-text: oklch(0.78 0.15 150);
--gradient-from: oklch(0.6 0.09 185);
--gradient-via: oklch(0.58 0.14 150);
--gradient-to: oklch(0.68 0.14 125);
--gradient-ink: oklch(0.86 0.08 150);
}