Where dashboard colours come from
The staff dashboard gets its colours from the Designer — the same colour system that controls the look of all Tracksies plugins. You configure your colours once in Tracksies > Designer, and they flow through to every tab (Orders, Returns, Customers), every dashboard element, and even kiosk mode automatically.
This means if you’ve already set up your brand colours for Tracksies HQ or Trustie, the staff dashboard will use those same colours out of the box. No extra configuration needed.
—
How it works
The Designer defines a set of CSS variables (think of them as colour labels that your browser understands). The staff dashboard maps its own variables to these Designer colour variables, with sensible fallbacks in case you haven’t configured your colours yet.
Here’s how the mapping works:
Dashboard primary colour uses your Designer primary colour. This is the main accent colour for buttons, active tabs, the tab bar highlight, and interactive elements. Falls back to WordPress blue (#2271b1) if colours aren’t configured.
Success colour (green) uses your Designer success colour. This appears on shipped status indicators and completion messages. Falls back to WordPress green (#00a32a).
Warning colour (yellow) uses your Designer warning colour. This appears on alerts and attention-needed indicators. Falls back to a standard amber (#dba617).
Error/danger colour (red) uses your Designer error colour. This appears on urgent priority badges and error messages. Falls back to WordPress red (#d63638).
Text colour uses your Designer text colour. This is the primary text colour across all dashboard tabs. Falls back to WordPress dark (#1d2327).
Surface colour uses your Designer surface colour. This is the background for the dashboard itself and the tab content areas. Falls back to WordPress light grey (#f0f0f1).
Border colour uses your Designer border colour. This is used for card borders, dividers, input outlines, and customer card borders. Falls back to WordPress border grey (#c3c4c7).
Card background uses your Designer background colour. This is the background for order cards, customer cards, and panels. Falls back to white (#ffffff).
—
Border radius
The dashboard also respects your Designer’s border radius settings. These control how rounded the corners are on cards, buttons, inputs, and panels throughout the dashboard.
The Designer provides four radius sizes:
- Small — used on buttons, inputs, and small elements
- Medium — used on cards, panels, and most containers
- Large — used on larger containers and modal-like elements
- Pill — fully rounded, used on badges and status indicators
To adjust the corner rounding, go to Tracksies > Designer > UI Styles and change the border radius values. The dashboard picks them up automatically.
—
Priority and status colours
Some colours are fixed and don’t change with your Designer settings. These are functional colours where consistency matters more than branding:
Priority levels:
- Urgent — red (#dc3545)
- High — orange (#fd7e14)
- Elevated — yellow (#ffc107)
- Normal — grey (#6c757d)
Order statuses:
- Processing — blue (#2271b1)
- Packed — purple (#9b59b6)
- Shipped — green (#00a32a)
These are intentionally consistent across all stores so that the priority and status system is instantly recognisable regardless of your brand colours. A red badge always means urgent, a green status always means shipped.
—
Changing your colours
To change how the staff dashboard looks:
- Go to Tracksies > Designer in your WordPress sidebar
- Click the Colours tab
- Adjust your Brand Colours (primary, secondary, accent) and Interface Colours (surface, background, border, text)
- Click Save
The dashboard updates immediately — no need to touch any Packsie settings. All tabs (Orders, Returns, Customers) will reflect your new colours, whether viewed in normal mode or kiosk mode.
—
Kiosk mode uses the same colours
When kiosk mode is enabled, the minimal template wrapper also pulls colours from the Designer. The dashboard header uses your primary colour, text uses your text colour, and the overall background uses your surface colour. Everything stays consistent, including the tab bar and all tab content areas.
—
For developers
The dashboard CSS variables are defined in the tab-specific CSS files and use the standard CSS var() function with fallback chains. If you need to override specific colours for the staff dashboard without affecting the rest of your site, you can target the .tracksies-staff-dashboard wrapper class in your theme’s custom CSS.
The full variable list:
--packsie-primary— main accent colour--packsie-success— success/completion colour--packsie-warning— warning/attention colour--packsie-danger— error/urgent colour--packsie-info— informational colour--packsie-dark— primary text colour--packsie-light— surface/background colour--packsie-border— border/divider colour--packsie-card-bg— card background colour--packsie-body-bg— page background colour
Each of these falls back to the corresponding Designer --tracksies-color-* variable, which in turn falls back to a hardcoded default. This three-level chain means the dashboard always looks good, whether you’ve configured the Designer or not.
Border radius variables:
--tracksies-radius-small— small elements (buttons, inputs)--tracksies-radius-medium— cards, panels, containers--tracksies-radius-large— larger containers--tracksies-radius-pill— fully rounded badges and pills
These come directly from the Designer’s UI Styles section and are used throughout all dashboard tabs.