feat(web): customize diff colors and markers

[SunkenInTime]

What Changed

• Added Appearance settings for red/green or orange/blue diff colors and bar or classic +/- line indicators.
• Applied the selected appearance to the main diff panel, pull request review diffs, and inline review comment diffs.
• Persisted both choices in unified settings with backward-compatible defaults, reset behavior, settings search, and concise user documentation.

Why

Diff colors and line indicators were fixed in the renderer, so users could not choose a more distinguishable palette or familiar patch markers. These settings keep the existing red/green bars as the default while offering accessible orange/blue colors and classic markers everywhere web/desktop diffs render.

UI Changes

Before

After

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 (not applicable; no motion or timing changes)

Verification:

• vp run --filter @t3tools/web typecheck
• git diff --check
• Live web pass for both selectors and the shared diff preview

Generated with GPT-5.6-sol in the Codex harness.

Note

Add diff color scheme and marker style settings to the Appearance panel

• Adds diffColorScheme (red-green | orange-blue) and diffIndicatorStyle (bars | classic) to ClientSettingsSchema with defaults, and exposes controls for both in the Appearance settings panel.
• Introduces getDiffColorSchemeClassName in diffRendering.ts to map a scheme to CSS variable classes (--t3-diff-addition-color, --t3-diff-deletion-color); DIFF_SURFACE_THEME_UNSAFE_CSS wires these into the diff renderer's themed color variables.
• Adds a StyledFileDiff wrapper alongside the existing StyledDiffCodeView so both code and file diff surfaces respect user-configured color scheme and indicator style.
• Settings search is updated with entries for "Diff colors" and "Diff markers", and restoring defaults now resets both fields.

^{Macroscope summarized ecd0ba5.}

---

Note

Low Risk
Display-only preferences with schema defaults and no auth or data-path changes; risk is limited to inconsistent diff styling if the CSS bridge is wrong.

Overview
Adds Appearance controls for diff colors (red/green vs orange/blue) and diff markers (bars vs classic +/−), persisted in unified client settings with defaults red-green and bars.

StyledDiffCodeView and a new StyledFileDiff wrapper read those settings and apply a color-scheme class plus Pierre’s diffIndicators option, so the main diff panel, PR review views, and inline timeline diffs stay in sync. Diff surface CSS now routes addition/deletion tints through --t3-diff-* overrides instead of hard-coded success/destructive tokens.

Settings search, restore-defaults, and a live DiffPreview under the marker row reflect the active choices; user docs cover the feature.

^{Reviewed by Cursor Bugbot for commit ecd0ba5. Bugbot is set up for automated code reviews on this repo. 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 Plus

Run ID: acba6b48-4f3d-4aff-8952-bf346f92b7cd

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]

Two consistency findings on the new diff appearance settings. Everything else (palette class plumbing, StyledFileDiff extraction, settings routing/search wiring) looks consistent with the existing patterns.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two consistency findings in the new Appearance diff settings UI (apps/web/src/components/settings/SettingsPanels.tsx). Everything on the diff-rendering side (StyledDiffCodeView.tsx, diffRendering.ts) reads consistently: the palette is routed through --t3-diff-* with --success/--destructive fallbacks, so FilePreviewPanel's reuse of DIFF_SURFACE_THEME_UNSAFE_CSS is unaffected, and diffIndicators: "bars" keeps the existing [data-indicators="bars"] selected-line rules matching.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the diff-appearance settings UI and the shared diff surface wrapper. The palette plumbing (getDiffColorSchemeClassName → --t3-diff-* → --diffs-*-base/tint overrides) is now owned in one place and StyledFileDiff reuses it, which resolves the earlier duplication and base-color concerns. Two findings remain on the new Appearance tiles' Toggle class string.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Approved ecd0ba5

This PR adds two cosmetic settings for customizing diff appearance (color scheme and marker style). Changes are purely visual, self-contained to client-side settings with no impact on core functionality, security, or data schemas. Tests and documentation included.

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

Dismissing prior approval to re-evaluate af66c02

[macroscopeapp]

Two new Appearance selects and the standalone diff preview don't follow the settings row conventions in this file. Details inline.

^{Posted via Macroscope — UI Consistency}