Skip to main content
The dashboard ships in three themes:

Light

Brand blue accent (#2563eb), near-black text on #f6f6f7 surfaces.

Dark

Lime accent (#a3e635), light text on #050506 surfaces.

Auto

Follows your OS prefers-color-scheme.
The toggle lives in the left rail’s footer (collapsed: just the icons; full: icons + status). On mobile it sits in the topbar next to the avatar.

​
Persistence

Your choice writes to localStorage under the key dashTheme (light, dark, or system). The value is read on every page load before React mounts, so there’s no flash of the wrong theme.

​
Accessibility

  • WCAG 2.1 AA contrast on all text against its surface (audited via axe-core in CI for the dashboard’s primary surfaces).
  • prefers-reduced-motion honored — entry animations, theme cross-fades, and the welcome screen all skip when set.
  • Keyboard navigation — every interactive control is in tab order, focus rings use the theme accent color, never browser default.
  • Screen-reader labels — all icon-only buttons have aria-label. The balance pill announces “Balance: $X.XX”.
  • Color is never the only signal — instance status, GPU availability, validation errors all combine color with text or shape.

​
Branding consistency

The lime/blue split is intentional:
  • Lime (#a3e635) is our brand identifier. It appears in the logo always, regardless of theme. In dark mode it doubles as the primary accent for CTAs.
  • Brand blue (#2563eb) is the light-mode CTA accent. Lime fails contrast on white, so we substitute. The lime accent line stays in the logo for brand recognition.
The landing page is always-dark by design — it’s the marketing surface, and the gradient hero only works on a dark canvas. There’s no light variant.