feat(web): Add high-contrast mode setting

[alacritythief]

Addresses & Fixes Related Issues

Addresses #254, #1279

Fixes #233, Fixes #400

What Changed

Added an opt-in High contrast mode setting to improve readability in both light and dark themes without changing the default appearance when the setting is off.

This includes:

• adding highContrastMode to the existing app settings schema and persistence flow
• exposing the toggle in Settings > Appearance
• applying a root high-contrast class when the setting is enabled
• adding CSS overrides under that class to strengthen muted/low-opacity text that was failing contrast checks

Why getLocalStorageItem is used

getLocalStorageItem is used so high contrast mode can be applied immediately at startup, before React renders.

That startup read is needed to avoid a flash where the app initially renders in normal contrast and only switches to high contrast after the app mounts. This mirrors the existing theme behavior, where theme classes are also applied early to avoid visual flicker.

The setting is still stored the same way as the rest of the app settings:

• in the shared AppSettingsSchema
• under the same t3code:app-settings:v1 local storage entry
• updated via useAppSettings().updateSettings(...)

The only special handling is the early synchronous read so the root class can be applied before first paint.

Why

The app had multiple contrast issues in both dark and light mode, mainly from:

• muted text being too weak on some surfaces
• repeated use of low-opacity text-muted-foreground/* utilities
• secondary metadata, helper text, empty states, and work-log labels becoming hard to read

The high contrast colors were chosen to bring these muted/read-secondary states closer to WCAG AA expectations for normal text contrast, instead of relying on visually subtle opacity reductions that were falling below accessible contrast thresholds. The goal here was not to redesign the palette, but to keep the existing visual language and raise the contrast of the specific text treatments that were failing.

Rather than changing the default theme for everyone, this PR adds a focused accessibility improvement that users can opt into when they want stronger readability.

Screenshots

High Contrast setting location

High Contrast togged ON

Dark mode with high contrast OFF

Dark mode with high contrast ON

Light mode with high contrast OFF

Light mode with with high contrast ON

Tool calls with high contrast OFF

Tool calls with high contrast ON

Checklist

• Added a persisted highContrastMode app setting
• Kept the default color system unchanged when the setting is off
• Applied high contrast styling through an opt-in root class
• Placed the toggle in Settings > Appearance
• Covered both light mode and dark mode contrast issues
• Ran bun fmt
• Ran bun lint
• Ran bun typecheck
• This change is as small as I can make it to be and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes

Note

Add high-contrast mode setting to the app settings UI

• Adds a highContrastMode boolean to AppSettingsSchema (default false) and a toggle in the Settings UI at _chat.settings.tsx with a reset-to-default button.
• Applies the high-contrast class to document.documentElement on load (before React mounts) and reactively whenever the setting changes via a useEffect in __root.tsx.
• Adds CSS rules in index.css that increase the contrast of muted foreground text and placeholders in both light and dark themes when the class is present.

^{Macroscope summarized 71787fd.}

[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

Run ID: 0f6b2154-16d3-4279-89e2-50a0c1dd18fa

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

Tip

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting to disable sequence diagrams in the walkthrough.

[alacritythief]

Updated the PR description with related issues that are addressed and fixed with this PR and added comparison screenshots for tool calls.