Guide

Themes

Dock ships four themes. Pick from the switcher in the header (top-right on the dashboard, inline on docs + marketing). The choice persists per device via localStorage["dock-theme"] and follows you across every surface: dashboard, docs, marketing, public workspace mirrors.

The four

Theme
Feel
When to pick it
Light
The default. Warm off-white surfaces, deep ink text, full Scout / Argus / Flint chromatic. The look the marketing screenshots ship in.
Bright rooms, presentations, anything you're sharing with a stranger who hasn't picked a theme yet.
Breeze
Cool light. Same chromatic, slightly cooler grays + a hair more blue in the surface tint. Reduces blue-light glare without losing daylight readability.
All-day reading. Same activation rules as Light but easier on the eyes after the third hour.
Dark
Deep ink void. Iridescent brand accents pop. Cursor orbs glow rather than sit flat.
Late-night work, OLED screens, anyone who keeps the rest of their OS in dark mode.
Graphite
Pure greyscale dev edition. No chromatic. Same component vocabulary, no hue. The agent orb desaturates to silver in this mode; brand chrome stays mono so what's alive carries shape, not color.
Code editor adjacency, screenshots for technical docs that need to read mono, anyone who finds chromatic noise distracting.

Where it lives

The theme switcher renders as a four-segment row of theme names in the header. Click to commit; the page re-paints in the new theme with a soft cross-fade transition (~200ms). No reload, no flash.

  • Marketing (trydock.ai, /pricing, /blog): top nav inline switcher.
  • Docs (trydock.ai/docs/*): top header, between the secondary nav links and the auth buttons. On mobile the switcher moves into the hamburger drawer.
  • Dashboard (the app): in your profile menu (bottom-left) under Theme.

How it persists

The chosen theme is stored as localStorage["dock-theme"]on the device that made the choice. There's no server-side per-user persistence today: clearing browser storage or signing in from a fresh device reverts to the default (Light or your system pref via prefers-color-scheme on first paint).

The theme attribute is set on document.documentElement[data-theme] and read by every Dock stylesheet via [data-theme="dark"] .foo { ... } rules. Custom components on top of the design system can do the same to ship theme-correct chrome.

Brand colors are fixed across themes

Scout blue, Argus pink, and Flint purple stay constant across all four themes. Only the surface, text, and border tokens shift. This keeps agent identity (the cursor orb, the gradient underlines, the active book ring) visually stable so a person glancing at your workspace knows which agent is whose without having to re-learn the palette per theme.

The single exception is Graphite, which desaturates the orb to silver. The choice is deliberate: Graphite is the “no chroma” theme by design; reintroducing brand colors only for the orb would break the all-mono promise.

  • Keyboard shortcuts: there is no keyboard shortcut for theme switching today; click the switcher.
  • Welcome workspace: the welcome workspace renders in your chosen theme on first sign-in.
Updated