Add colorblind mode setting

[TimCrooker]

What Changed

Added an opt-in Colorblind mode toggle in Settings > General. When enabled, every place in the UI that uses red/green to distinguish additions from deletions switches to blue/orange instead.

Covers three areas:

• Diff panel — line backgrounds, emphasis highlights, and the -N/+N header stats
• DiffStatLabel — the +additions / -deletions text shown inline in chat messages
• GitActionsControl — per-file and total +insertions / -deletions in the commit dialog

Color palette

The colors come from GitHub's Primer design system (@primer/primitives diffBlob tokens), which is the most widely deployed colorblind-friendly diff palette in production. GitHub ships six colorblind-aware themes built on these values.

	Addition (blue)	Deletion (orange)
Light	#0969da	#bc4c00
Dark	#388bfd	#db6d28

Blue/orange was chosen because both hues maintain their identity under the most common forms of color vision deficiency (deuteranopia and protanopia, which affect ~8% of males). This is the same pair GitHub, Primer, and several other tools converged on after extensive accessibility research.

References:

• Primer Primitives diffBlob tokens
• How Primer's color system is making GitHub more inclusive
• GitHub protanopia/deuteranopia colorblind themes

Why

I'm colorblind. Red and green look the same to me, which makes diffs and stats hard to read. Blue and orange are distinguishable across all common forms of color vision deficiency.

Closes #1537

UI Changes

Settings toggle (off by default):

Diff panel — default (red/green) vs colorblind mode (blue/orange):

Diff stats in chat — default vs colorblind mode:

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

Add colorblind mode setting that replaces red/green diff colors with blue/orange

• Adds a colorblindMode boolean to ClientSettingsSchema (default false) and a toggle in the General settings panel
• Introduces COLORBLIND_DIFF_STYLES in diffRendering.ts with light/dark palettes for addition/deletion colors
• DiffPanel dynamically rebuilds its CSS via a new buildDiffPanelCss function when colorblind mode or theme changes, replacing success/destructive CSS variables with blue/orange
• DiffStatLabel, ChangedFilesTree, MessagesTimeline, and GitActionsControl all accept and apply the colorblind style prop for consistent rendering across the UI

^{Macroscope summarized 6045239.}

---

Note

Low Risk
Low risk: primarily UI/theming changes plus a new ClientSettingsSchema boolean with a default, affecting diff/stats coloring but not core data flows.

Overview
Adds an opt-in Colorblind mode setting (colorblindMode, default false) to client settings and exposes it in the General settings panel (including dirty-state tracking).

When enabled, diff-related UI swaps red/green addition/deletion colors to a GitHub Primer blue/orange palette across the diff panel (via generated unsafeCSS overrides), chat diff stat labels/changed-files tree, and git commit dialog file/total stats; the active style is derived from the current theme and updates at runtime.

^{Written by Cursor Bugbot for commit 6045239. This will update automatically on new commits. Configure here.}

[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: 16d2467b-b3cc-40ae-aa6e-9d1f83357858

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.}

[Copilot]

Pull request overview

Adds an opt-in client setting to make the diff panel more colorblind-accessible by switching the addition/deletion palette from red/green to orange/blue, and wires it through settings UI + legacy migration.

Changes:

• Added colorblindDiffColors (default false) to the client settings schema.
• Updated DiffPanel styling to generate diff CSS dynamically based on the setting (blue/orange when enabled).
• Added a General settings toggle with restore-defaults tracking and legacy localStorage migration support.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/contracts/src/settings.ts	Adds the new client setting to the schema with a decoding default.
apps/web/src/components/DiffPanel.tsx	Builds diff CSS based on the setting and passes it to the diff renderer.
apps/web/src/components/settings/SettingsPanels.tsx	Adds the Settings UI toggle and includes it in restore-defaults dirty tracking.
apps/web/src/hooks/useSettings.ts	Migrates the setting from legacy localStorage into the new client settings storage.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[juliusmarminge]

Please add some screenshots!

[juliusmarminge]

We should also consider making this in an extendable way since we'll have high contrast mode as well (#1284), and probably custom themes in the future and don't wanna remove this all when that happens

[TimCrooker]

Good point on extensibility. The way this is structured should play nicely with a future theme system or high-contrast mode (#1284):

• The diff panel colors are isolated in a single buildDiffPanelCss() function that takes a flag and a theme. If you move to a general theme/preset system later, that function just needs to accept a theme key instead of a boolean, and the CSS variable overrides stay the same.
• The DiffStatLabel and GitActionsControl stat colors use a CB_STYLES object keyed by light/dark. Extending that to additional palettes (high contrast, custom themes) is a straightforward object lookup change.
• Nothing here touches the base --success/--destructive CSS variables. It's all override-layer, so ripping it out or replacing it with a broader theme system later shouldn't require undoing anything.

Happy to restructure if you have a specific pattern in mind for how the theme/preset system should look.

[TimCrooker]

All feedback addressed — removed the dead migration, added tests, and added screenshots. Ready for another look when you get a chance.