Skip to content

Add diff line background intensity option#691

Merged
backnotprop merged 1 commit into
backnotprop:mainfrom
skripalschikov:diff-line-bg-intensity
May 11, 2026
Merged

Add diff line background intensity option#691
backnotprop merged 1 commit into
backnotprop:mainfrom
skripalschikov:diff-line-bg-intensity

Conversation

@skripalschikov
Copy link
Copy Markdown
Contributor

Add diff line background intensity option

Motivation

For me the default diff line background is very pale — green/red lines fade into the page tint and the diff is hard to scan, especially on light themes. This PR adds a user-facing toggle so anyone with the same pain can crank the line bg up without affecting users who like the current look.

Summary

Adds a Line Background Intensity setting (Subtle / Normal / Strong) so users can opt into a bolder green/red line background. Defaults to Subtle — existing users see no visual change.

The control appears as a sub-option under Show Diff Background in both the diff-options popover and the Settings dialog; it's only shown when the parent toggle is on.

Approach

  • Subtle preserves the @pierre/diffs library default exactly.
  • Normal / Strong scale the line bg through Pierre's existing --mix-light / --mix-dark pipeline rather than overriding the final background-color. This keeps Pierre's --diffs-line-bg flow intact so selected / hovered / decorated line states still produce their state-specific visuals.
  • Word-emphasis chip is derived from --diffs-computed-diff-line-bg (oklch(from … calc(l ± 0.07) c h)), not from the theme's addition / deletion base color. The chip ends up "one perceptual step deeper than this specific line" at every intensity and across themes — no per-intensity emphasis tuning needed.
  • Theme overrides for --diffs-addition-base / --diffs-deletion-base are respected — only the alpha/lightness scales, not the hue.

Bug fix bundled in

Pierre's word-emphasis rule ([data-line-type=…] [data-diff-span] { background-color: var(--diffs-bg-addition-emphasis) }) isn't gated on [data-background], so disabling Show Diff Background used to leave the word-diff chips painted on plain lines. Added a pre:not([data-background]) … { background-color: transparent !important } rule that applies at every intensity (including Subtle), so the toggle now consistently turns both line bgs and chips off.

Drive-bys

  • Dropped dead .diff-line-addition / .diff-line-deletion rules in packages/review-editor/index.css — these classes never actually reach Pierre's shadow DOM, so they had no effect and were misleading for anyone tracing where the diff bg lives.
  • Inline hunk previews (DiffHunkPreview — used in Code Tour, comment threads) pick up the same intensity setting, so the look stays consistent with the main diff viewer.

*Changes authored by Claud

Screenshots (GitHub theme)

Subtle:
Screenshot 2026-05-10 at 23 15 56

Normal:
Screenshot 2026-05-10 at 23 16 03

Strong:
Screenshot 2026-05-10 at 23 16 09

@backnotprop backnotprop force-pushed the diff-line-bg-intensity branch from 318e667 to 70d4d6a Compare May 11, 2026 14:06
@backnotprop backnotprop merged commit 50191e6 into backnotprop:main May 11, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants