Skip to content

[UI] Fix images and branch labels showing wrong colors in dark mode - #730

Merged
hannesa2 merged 1 commit into
masterfrom
html-dark-theme
Oct 3, 2026
Merged

[UI] Fix images and branch labels showing wrong colors in dark mode#730
hannesa2 merged 1 commit into
masterfrom
html-dark-theme

Conversation

@goneng

@goneng goneng commented Sep 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Show images and branch labels in their true colours in dark mode, by giving the history, commit, log and diff views real dark colours instead of inverting the whole page. Supersedes #729, which fixed only the labels.

In dark mode GitX.css ran each of these pages through invert(0.89) hue-rotate(180deg), and tried to undo it on images with a second filter plus contrast(160%). The undo cannot be exact, since the invert squeezes every colour into a narrower range, so a changed image shown in a commit's diff came out in the wrong colours: red #e02020 as a dusty #b4625f, yellow #fced6f as a pinkish grey. Gravatars, the file-type icons and the branch labels were affected the same way. Blame and the file view already had a dark theme of their own and are not touched.

Changes

  • The filter is gone: .body--dark sets the page's text and background colours directly, and images are shown as they are.
  • Every colour the four views set has a .body--dark twin, computed as exactly what the filter turned it into, so the dark look is unchanged. The twins were generated from the stylesheets rather than written by hand. The one semi-transparent colour, the trailing-whitespace marker, was solved separately so it lands on the same colour over both greens it is drawn on.
  • Branch labels keep the history list's colours, with black text, as in light mode.
  • The context slider in the commit view is now drawn by macOS as a dark control, where the filter used to invert the light one.

Screenshots

Before

image image

After

image image

Test plan

  • An offscreen WebView render of each of the four views, filled with a diff (added, removed and inline-changed lines, trailing whitespace, hunk buttons, a selected line), the file list, notifications, labels and a test image, before and after, in light and dark mode:
    • Light mode is pixel-identical to master in all four views.
    • In dark mode the only changes are the labels, the images and icons (now in their true colours), the slider, and the anti-aliased edges of text, which renders directly on dark rather than being inverted.
  • In the Debug build, in dark mode: the details pane of a commit with labels, a commit with an image change, the Stage view with a diff, and a file's log.

@goneng goneng mentioned this pull request Sep 25, 2026
Closed
@goneng goneng changed the title Fix images and branch labels showing wrong colours in dark mode [UI] Fix images and branch labels showing wrong colours in dark mode Sep 26, 2026
@goneng goneng added the bugfix label Sep 26, 2026
@goneng
goneng force-pushed the html-dark-theme branch 2 times, most recently from 9d9bd90 to 669b650 Compare September 29, 2026 18:11
@goneng

goneng commented Sep 29, 2026

Copy link
Copy Markdown
Collaborator Author

Both flagged screenshots are 1-bit noise, not rendering changes. Checked at pixel level against the baseline panel:

The two views this PR actually restyles, history-view.png and staging-view.png, came out identical to the baseline, which is the expected result: the screenshot suite runs in light mode, and this change is meant to be a no-op there.

Worth noting that the suite therefore does not cover what this PR fixes. Dark mode is not captured, so the evidence for it is the before/after WebView renders in the test plan rather than CI.

@hannesa2

hannesa2 commented Sep 30, 2026

Copy link
Copy Markdown
Contributor

Root cause of noise: git diff-image (via ImageMagick's compare) applies its 5% fuzz threshold only to JPEGs, never PNGs (see diff-image line: fuzz='5' only if ext = jpeg|jpg). Since GitX screenshots are PNGs, every pixel-level difference gets highlighted, including harmless noise

@hannesa2

hannesa2 commented Sep 30, 2026

Copy link
Copy Markdown
Contributor

Root cause of noise: git diff-image (via ImageMagick's compare) applies its 5% fuzz threshold only to JPEGs, never PNGs (see diff-image line: fuzz='5' only if ext = jpeg|jpg). Since GitX screenshots are PNGs, every pixel-level difference gets highlighted, including harmless noise

Let's see if it works #740

@goneng

goneng commented Sep 30, 2026

Copy link
Copy Markdown
Collaborator Author

Root cause of noise: git diff-image (via ImageMagick's compare) applies its 5% fuzz threshold only to JPEGs, never PNGs (see diff-image line: fuzz='5' only if ext = jpeg|jpg). Since GitX screenshots are PNGs, every pixel-level difference gets highlighted, including harmless noise

Let's see if it works #740

Great! I will rebase my change and see.
(also, because this change only affects dark-mode views, I will install it locally to confirm)

@hannesa2

hannesa2 commented Sep 30, 2026

Copy link
Copy Markdown
Contributor

I tried already to explain it here #740 (comment)
On the first view, it looks like, that it detects some changes, but resulting image comes with fuzz logic and shows no diff.
Maybe the compare need in advance such a fuzz logic as well

@goneng
goneng marked this pull request as ready for review September 30, 2026 21:06
@goneng
goneng requested a review from hannesa2 September 30, 2026 21:06
@goneng

goneng commented Sep 30, 2026

Copy link
Copy Markdown
Collaborator Author

You're right, the compare needs the fuzz up front. The early check in diff-image is exact (L177), so any noise goes on to write a diff file, even when the fuzzed diff image shows nothing.
Maybe compare -metric AE $fuzz_flag "$f1" "$f2" null: there, with the fuzz set up before it?

@goneng
goneng force-pushed the html-dark-theme branch 2 times, most recently from d76fdf9 to 75596f6 Compare September 30, 2026 22:06
@hannesa2

hannesa2 commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

You're right, the compare needs the fuzz up front. The early check in diff-image is exact (L177), so any noise goes on to write a diff file, even when the fuzzed diff image shows nothing. Maybe compare -metric AE $fuzz_flag "$f1" "$f2" null: there, with the fuzz set up before it?

#743 Please rebase to master to see if it works now

@goneng goneng changed the title [UI] Fix images and branch labels showing wrong colours in dark mode [UI] Fix images and branch labels showing wrong colors in dark mode Oct 2, 2026
@goneng
[UI] Fix images and branch labels showing wrong colors in dark mode
616fd62 
Give the HTML views real dark colors instead of inverting the whole
page, so what they show in its own colors keeps them.

- Drop the page-wide invert filter, and the partial undo on images,
  from the history, commit, log and diff views
- Give every color those views set a dark twin, computed as what the
  filter turned it into, so the dark look stays as it was
- Keep images, file icons and branch labels in their true colors,
  and let the context slider draw as a native dark control
@goneng

goneng commented Oct 2, 2026

Copy link
Copy Markdown
Collaborator Author

#743 Please rebase to master to see if it works now

Tested OK - I think it is safe to merge, thanks!

@hannesa2
hannesa2 merged commit 71de94e into master Oct 3, 2026
3 checks passed
@hannesa2
hannesa2 deleted the html-dark-theme branch October 3, 2026 06:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hannesa2 hannesa2 Awaiting requested review from hannesa2

Assignees

No one assigned

Labels

bugfix

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@goneng @hannesa2