Skip to main content
The dashboard is styled entirely from CSS custom properties. Components read tokens rather than hard-coded colours, so changing a token restyles everything that uses it — you never fork a component to recolour it.

​
Where your styles go

Your app’s src/styles.css imports the Spree stylesheet. Anything below that import wins, because it lands later at the same specificity:
src/styles.css
That is the whole mechanism. No build config, no plugin, no component overrides.
The seller panel works the same way — its starter imports @spree/seller-dashboard/styles.css, and the same tokens apply.

​
Dark mode

Every token has a dark counterpart under .dark. A theme is only complete when you set both:
src/styles.css
The theme provider decides mode — light, dark or system — and toggles a .dark class. It holds no colours. Override only :root and your theme breaks the moment someone switches to dark.

​
The tokens

​
Surfaces and text

​
Brand and interaction

​
Status

--destructive and --destructive-foreground for dangerous actions, plus four status families used by badges and callouts — each with -bg, -border and -fg: --status-green-*, --status-amber-*, --status-red-*, --status-blue-*

​
Borders and structure

The sidebar has its own family so you can give the chrome a different tone from the content: --sidebar, --sidebar-foreground, --sidebar-primary, --sidebar-accent and its hover steps, --sidebar-border, --sidebar-ring.

​
Charts

--chart-1 through --chart-5, in series order.

​
Tokens defined from other tokens

Several tokens alias another rather than naming their own colour:
So overriding one base token cascades. Setting --foreground alone also moves primary buttons, because that is where --primary points. Override the alias directly when you want them to diverge.

​
Fonts and the type scale

Typography is set in a @theme inline block and overridden the same way:
src/styles.css
The dashboard’s scale is deliberately smaller than Tailwind’s default, because admin screens are dense. Raising --text-base raises everything built on it.

​
Using tokens in your own pages

Tailwind maps every token through @theme inline, so utilities follow your values with no extra work:
Use the utilities rather than raw var(--token) — a page built from bg-card and text-muted-foreground inherits every future change, including dark mode. For inline text links there is a .link class carrying the canonical treatment:
It is for links in prose and help text. A link that is really a table row, a breadcrumb, a nav item or a button rendered as an anchor carries its own styling, and .link would fight it.