Skip to content

Add user preferences to customize Diffs colors

Jonas Wälter requested to merge siemens/gitlab:diffs-colors-settings into master

What does this MR do and why?

In Diffs comparing the previous content with the new content (e.g. when reviewing a merge request or in a Markdown inline diff), the colors red for old content and green for new content are typically used. (The exact colors depend on the selected syntax highlighting theme). However, these colors may lead to difficulties in case of red–green color blindness (see #18818).

Git itself already has a solution to this problem. You can configure the diff colors yourself for the console (see stackoverflow question and git docs):

Customize colors in Git 
# Set colors in general (.gitconfig)
git config --global color.diff.new blue
git config --global color.diff.old yellow
# Set colors for single command
git -c color.diff.new=blue -c color.diff.old=yellow diff

So let's make that happen in GitLab too! 🚀

As proposed in #18818 (comment 790147598), this MR adds two color pickers on the User Preferences to select the following colors:

  • Deletion (old content) color
  • Addition (new content) color

If these preferencesare set, the colors specified in the theme will be overwritten in all diff views.

🛠 with ❤ at Siemens

/cc @bufferoverflow

Screenshots and screen recordings

Diff_Colors_Settings

Video (outdated) Diffs_colors
Screenshots (outdated)
Preview with default colors Preview with other colors
image image

How to set up and validate locally

  1. Visit a page with a Diff view (e.g. merge request changes, commits compare) ➡ see default diffs colors
  2. Visit page User Preferences and select diffs colors: http://localhost:3000/-/profile/preferences#diffs-colors
  3. Reload page with a Diff view ➡ see customized diffs colors in action

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jonas Wälter

Merge request reports