High-contrast user message bubbles

[coygeek]

feat(appearance): add high-contrast user message bubbles

Summary

Add a first-class Appearance choice that gives user-authored messages a strongly contrasted, inverted bubble. Keep the current subtle bubble style available for people who prefer it.

Problem to solve

In the stock T3 Code light theme, a user message uses a light gray surface against an almost-white conversation canvas. The message text itself is readable, but the bubble does not stand out enough to scan a long thread and quickly find the instruction that started each turn. Codex desktop solves this in its light appearance with a dark outgoing-message bubble and light text.

T3 Code can produce a similar result through a custom theme's advanced "Message surface" control, but that requires duplicating a theme and editing color roles. There is no direct Appearance preference for users who want stronger separation while keeping the rest of their selected theme.

Proposed behavior

Add a user-message style choice under Settings > Appearance with the current subtle treatment and a high-contrast treatment. The high-contrast choice should make user messages visually distinct from the conversation canvas in both light and dark appearances, using an inverted surface and readable foreground appropriate to the active theme. The preference should apply immediately and persist like the other Appearance settings.

Acceptance criteria

• Settings > Appearance offers a clear choice between the current subtle user-message treatment and a high-contrast treatment.
• Selecting the high-contrast treatment makes user-authored message bubbles immediately distinguishable from the conversation canvas without changing assistant messages or the rest of the active theme.
• The selected treatment persists across restarts and follows the same scope and synchronization rules as the other Appearance preferences.
• Plain text, Markdown, links, inline and fenced code, file and image attachments, context chips, timestamps, and message actions remain readable and usable inside both treatments.
• Light and dark appearances each resolve a readable message foreground against the selected message surface rather than assuming one fixed foreground color.
• The web client and desktop app render the selected treatment consistently.

Affected area

The web chat timeline, the desktop app that wraps it, and Settings > Appearance. The existing message surface and foreground theme roles are relevant because custom themes and built-in palettes already use them for user messages.

Non-goals

• Redesigning the custom theme editor or adding arbitrary per-message color controls.
• Changing assistant-message layout, provider behavior, or conversation data.
• Forcing the high-contrast treatment as the only style.

Alternatives considered

Changing the stock T3 Code palette to a dark user bubble would be simpler, but it would remove the current visual treatment for users who prefer it and could be too opinionated for every built-in theme. Requiring a custom theme technically makes the result possible today, but it turns a common readability preference into a theme-authoring task.

Supporting context

Verified on main at 2921050c698fb195e2f5590b7cfab8fdfe0ec729. The stock light palette sets the conversation canvas to #fcfcfc, the user-message surface to #f4f4f5, and the user-message foreground to #27272a. That gives the bubble and canvas about 1.07:1 contrast while preserving strong text contrast. apps/web/src/components/chat/MessagesTimeline.tsx renders user messages with the semantic message surface and foreground roles, and the advanced custom-theme editor already exposes those roles as "Message surface." PR #4441 previously increased light-mode bubble contrast, but it did not add an inverted treatment or a user-facing choice. PR #5226 later introduced the modular theme roles and custom editor. A title-and-body screen of all 516 repository Discussions, plus targeted issue and pull-request searches, found no existing proposal for a dedicated high-contrast user-message preference.