Add user preferences to customize Diffs colors
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.
/cc @bufferoverflow
Screenshots and screen recordings
Video (outdated)
Diffs_colorsHow to set up and validate locally
- Visit a page with a Diff view (e.g. merge request changes, commits compare)
➡ see default diffs colors - Visit page User Preferences and select diffs colors: http://localhost:3000/-/profile/preferences#diffs-colors
- 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.
-
I have evaluated the MR acceptance checklist for this MR.