fix(web): improve built-in theme contrast

[chrisdeeming]

What Changed

• Improve foreground and surface contrast across all built-in themes.
• Preserve each theme’s hue and character while adjusting lightness for readability.
• Solve muted text and placeholders against their actual surfaces, including custom vivid themes.
• Keep boot-time and runtime palette values synchronized.

Why

Several built-in theme color pairs fell below the WCAG 2.2 AA requirement of 4.5:1 for normal text.

This raises the audited core palette result from 275/300 to 300/300 passing pairs while retaining the intended visual character of each theme.

UI Changes

Theme	Before	After
T3 Code Dark
T3 Chat Light
Grove Dark
Ocean Dark
Ember Dark
Iris Dark

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Visual-only theme and token changes with no auth, data, or API impact; users may notice slightly different muted text and accent shades across built-in and custom vivid themes.

Overview
Raises built-in and generated theme palettes to WCAG AA (4.5:1) for normal text while keeping each theme’s hue and character.

Palette generation now computes mutedForeground and placeholder for contrast on muted and surfaceRaised, instead of reusing textMuted. Maintainer themes (T3 Chat light, T3 Code dark, etc.) get tuned accent/action hex values and darker muted/placeholder pairs where needed.

CSS and boot wire --muted-foreground to --app-theme-muted-foreground in themed modes, set --ring to --primary, and sync T3 Chat light accent in index.html boot palettes.

UI uses text-update-foreground for “new” and update-advisory icons so glyphs stay readable on filled controls. Theme inspector maps muted-foreground utilities to the mutedForeground role.

Tests enforce 4.5:1 on muted/placeholder pairs, message-action hover, and accent pairs (no more 3:1 exception for T3 Chat light).

^{Reviewed by Cursor Bugbot for commit e668779. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Improve contrast for muted foreground, placeholder, and accent colors in built-in themes

• createVividThemeColors and createManagedThemeColors in themePalette.ts now derive mutedForeground and placeholder via contrast-aware algorithms against their respective surfaces (muted and surfaceRaised), replacing the previous textMuted reuse.
• Updates T3 Chat light palette token values for accent, update, messageAction, mutedForeground, placeholder, and warningForeground; T3 Code dark palette primary-related tokens are slightly adjusted.
• --muted-foreground in index.css now maps to --app-theme-muted-foreground instead of --app-theme-text-muted in themed dark mode and the sidebar.
• Focus ring (--ring) now follows var(--primary) in both light and dark instead of a fixed oklch value.
• NEW_BADGE_CLASS and the version advisory button in settings now use text-update-foreground instead of text-update for legibility.
• Behavioral Change: generated vivid and managed theme palettes may produce different mutedForeground/placeholder colors compared to previous builds.

^{Macroscope summarized e668779.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6c7fefb4-da6d-4ce6-a5fd-41a7a1691692

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved e668779

Pure styling/accessibility changes that update color values and CSS classes to meet WCAG AA contrast requirements. No runtime logic is affected - only visual appearance changes to improve readability.

^{You can customize Macroscope's approvability policy. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 1ae63c0. Configure here.}