Skip to content

Use our own diff colors instead of deriving them from themes - #97

Open
jpenilla wants to merge 4 commits into
masterfrom
fix/diff-colors
Open

jpenilla wants to merge 4 commits into
masterfrom
fix/diff-colors

Conversation

@jpenilla

@jpenilla jpenilla commented Oct 27, 2026 •

Copy link
Copy Markdown
Member

Themes define diff colors too inconsistently to rely on: many are missing the keys entirely, gutter colors are often translucent, and git decoration colors aren't always green/red (gruvbox uses cream and near-black, Slack uses yellow). The old fallback chain worked around this per color, and still produced washed-out or invisible highlights in many themes. Changed-word highlights in particular were nearly invisible in dark mode.

Now the theme only provides the editor foreground, background, selection, and hunk header colors. Diff colors are our own:

  • Added/removed lines get a bar in a fixed green/red accent at the left edge of the row, and a light translucent tint of it, so they sit on any theme background while keeping syntax colors readable.
  • Changed words get a stronger tint on top.
  • Changed lines within diffed patch files are colored by mixing the accents with the theme foreground, instead of a background that stacked with the outer line's.

Known limitation: syntax colors close in hue to the accent (e.g. a purple token on a removed line) can still be harder to read on changed-word highlights. Fixing that properly means adjusting token colors per background, which is left for later.

Also drops chroma-js, which was only used for the theme color math.

Screenshots

Before on the left, after on the right.

GitHub Dark Default
GitHub Light Default
Dracula
Solarized Light
Min Dark (no diff colors before)

Themes define diff colors too inconsistently to rely on (missing keys,
translucent gutter colors, git decoration colors that aren't green or
red), so the old fallback chain produced washed-out or invisible
highlights in many themes.

Take only the editor foreground, background, selection, and hunk header
colors from the theme. Added/removed lines and changed words use fixed
green/red accents as translucent tints, so they sit on any theme
background, with stronger changed-word highlights. Changed lines within
diffed patch files are colored by mixing the accents with the theme
foreground instead of a stacked background.

Drops chroma-js, which was only used for theme color math.
@github-actions

github-actions Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
diffs ✅ Ready (View Log) Visit Preview c5cb1dd

Changed lines get a bar in the accent at the left edge of the row, which
lets their tint be lighter so syntax colors stay readable on it. Changed
words get a lighter tint with an underline instead of a strong rounded
fill.

This branch was successfully deployed

1 active deployment
Preview — c5cb1ddb Deployed Oct 27, 2026 by github-actions[bot]
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.

Addition/Deletion highlights in the diff should stand out more

1 participant