Phase 2.x -- Theme Preferences Toggle

Parent: #762

Context

The theme architecture (docs/design/brand-and-ux.md) defines 5 independent axes (color palette, density, typography, animation, sidebar mode) as user preferences. The architecture is implemented but there is no UI for users to toggle between options. This needs a persistent, always-visible control accessible from every page.

Scope

Theme toggle widget -- a small floating button (edit/palette icon) visible on all pages, likely in the bottom-right or top-right near the status bar. Clicking opens a compact popover/drawer with:

1. Color palette: dropdown or segmented control (Warm Ops, Ice Station, Stealth, Signal, Neon)
2. Density: segmented control (Dense, Balanced, Medium, Sparse)
3. Typography: dropdown (Geist, JetBrains + Inter, IBM Plex)
4. Animation: segmented control (Minimal, Spring, Instant, Status-driven, Aggressive)
5. Sidebar mode: segmented control (Rail, Collapsible, Hidden, Persistent, Compact)

Each change applies instantly (live preview, no save button needed). Selections persist across sessions (localStorage or user settings API).

Design requirements

• Always visible: small icon button (e.g. palette icon, sliders icon, or paintbrush) rendered in the app shell, not inside any specific page
• Non-intrusive: should not compete with main content. Small, muted, becomes prominent on hover
• Compact popover: not a full settings page. Quick access, 5 sections, close on Escape or click outside
• Live preview: changing any axis updates the UI immediately via ThemeProvider context
• Persistence: save to localStorage initially, migrate to user settings API when feat: implement human roles and access control levels #257 (human roles) lands
• Keyboard accessible: trigger via Cmd+K action ("Change theme", "Set density"), or direct keyboard shortcut (e.g. Cmd+Shift+T)
• prefers-reduced-motion: if the OS setting is "reduce motion", default animation to "Minimal" and show a note in the toggle

Visual reference

+--[Status Bar]--------------------------------------[theme-icon]--+
|                                                                   |
|  [Sidebar]  [Main content area]                                   |
|                                                                   |
|                                          +-- Theme Preferences --+|
|                                          | Color   [Warm Ops  v] ||
|                                          | Density [====O=======] ||
|                                          | Font    [Geist      v] ||
|                                          | Motion  [Status-drv  ] ||
|                                          | Sidebar [Collapsible ] ||
|                                          +------------------------+|
+-------------------------------------------------------------------+

Deliverables

• Floating theme toggle button in app shell (visible on all pages)
• Popover with 5 axis controls
• Live preview on change
• Persistence to localStorage
• Cmd+K integration ("Change theme", "Set density to dense", etc.)
• prefers-reduced-motion detection
• Storybook story for the popover
• Unit tests for preference persistence and theme application

Blocked by

• feat: design tokens and core UI components #775 (design tokens -- need the theme system implemented first)
• feat: interaction components and animation patterns #776 (interaction components -- need popover/command palette patterns)

Notes

• This is NOT the Settings page (feat: Settings page (search, dependency indicators, grouped rendering) #784). Settings manages system-level config. This is personal UI preferences.
• The 5 theme configs from the design exploration already exist as reference. This issue wires them into a user-facing toggle.
• Consider: should this also support custom accent color via a color picker? Defer to future enhancement if complex.