Appearance themes: complete light and dark color sets beyond accents #2161

Summary

Appearance has three settings now: Mode, Accent and Vibe level. An accent colors only the message bubbles, Send and the sidebar hover and selection. The canvas, the panels and all text use one fixed neutral ramp, so every Buzz window looks almost the same.

This issue proposes themes: named, complete color sets that also color the canvas, the sidebar and the neutral surfaces. Each theme has a light mode and a dark mode. The current look stays the default as Buzz.

Proposed themes

Each palette below was measured against the design system's contrast targets, and the values were adjusted in lightness until every pair passed. All 262 measured pairs pass WCAG AA (4.5:1 for text, including text on the accent; 3:1 for online and busy dots) and APCA (Lc 60 for body text, Lc 45 for headings and metadata). Pairs measured: text and muted text on the main pane, text on received bubbles, sidebar text and headings on the sidebar, sidebar text on hover, selected text on the selected row, the Send icon on the accent, own-bubble text on the own bubble, and badge text on the badge.

Proposed design

1. A theme setting. Add theme to the appearance snapshot, stored as buzz-theme.v1. The service writes data-theme on <html>, next to data-color-mode, data-accent and data-color-level. Unknown values fall back to buzz.
2. A fixed set of theme slots. A theme overrides a tinted neutral ramp, the canvas, a new --surface-sidebar role and, optionally, the badge and status colors. Buttons, tabs, menus and links still read the neutral roles, so they stay neutral within each theme's tinted grays and never take the accent.
3. Dark frames on light pages. Relax and Utmost put the frame (canvas, top bar and sidebar) in a dark scope in light mode, and the main pane stays light. The frame reuses the dark-mode role pairs, so its text pairs are covered by the existing contrast guard.
4. A signature accent for each theme. Add an accent value Theme, shown as the first swatch, which follows the active theme's family. Cacophony uses Iris, and Utmost uses Cobalt. The other five themes need new families (plum, periwinkle, sky, teal, navy and phosphor), which exist only inside their themes. Under the Buzz theme, Theme resolves to Citrus, so the default look does not change. A saved manual accent stays as it is.
5. Theme-owned selection and own bubbles. A theme may set the sidebar selection pair and the own-bubble pair. Cacophony uses a gray selection, Troupe and Howdy use a soft selected pill, and Cable and Howdy use green own bubbles. The vibe level still chooses soft or solid bubbles.
6. Settings. A Theme row at the top of Appearance → Interface shows radio cards with a live preview, the name and the description. It uses the existing RadioGroup, so keyboard and screen-reader behavior stay the same.
7. Guards and tests. check-contrast.mjs covers every theme × mode × vibe × accent, including the dark frame scope. There are unit tests for the service and one browser journey: pick a theme with the keyboard and with the pointer, reload, switch the mode, and check the frame scope.

Design-system decisions needed

• DESIGN.md says "Never recolor the whole shell." The proposal makes themes the only owner allowed to recolor the shell, and only through the fixed slots above. The same change updates DESIGN.md (Accent color and Both modes).
• Limit theme color to messages, send, and sidebar states #1479 limited accent color to bubbles, Send and the sidebar on purpose. The proposal keeps that limit, because shared controls stay neutral and accents keep their scope. Please review this before implementation starts.
• Five new accent families add maintenance: twelve steps × two modes, plus ink, link and pressed values each.

Out of scope for the first version

• Custom themes that people create and share.
• Syncing the theme across devices through encrypted preferences.
• Changes to corner shape or fonts for a theme.
• Mobile parity.

Implementation plan

Two parallel tracks, then one PR for each remaining theme:

1. Foundation: the setting, slots, frame scope, Theme accent, Settings row, contrast guard, DESIGN.md update and the Relax theme.
2. Palettes: the values for all seven themes, as palette-layer tokens only.
3. Cacophony, Utmost, Troupe, Cable, Howdy and Baton, each as a small PR on top of the foundation.