> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gpuoutlet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes & accessibility

> Light / dark / system theme, persistence, and accessibility commitments.

The dashboard ships in three themes:

<CardGroup cols={3}>
  <Card title="Light" icon="sun">
    Brand blue accent (#2563eb), near-black text on #f6f6f7 surfaces.
  </Card>

  <Card title="Dark" icon="moon">
    Lime accent (#a3e635), light text on #050506 surfaces.
  </Card>

  <Card title="Auto" icon="desktop">
    Follows your OS `prefers-color-scheme`.
  </Card>
</CardGroup>

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.