← All examples

CSS Look & feel gitlab.com

GitLab: colorblind-friendly diff

Replaces the red and green diff highlights with blue and orange that are easier to tell apart.

Code to copy

/* Colorblind-friendly diff colors: blue for added, orange for removed */
.diff-file .line_holder .new,
.diff-file .line_content.new,
.diff-file td.new {
  background-color: #d4e6ff !important;
}
.diff-file .line_holder .old,
.diff-file .line_content.old,
.diff-file td.old {
  background-color: #ffe4c4 !important;
}

How to use this example

  1. Copy the code with the button above.
  2. Install JustZix (2 minutes) and open the extension on the target page.
  3. Add a new rule matching that page.
  4. Paste the code into the rule's CSS panel and save — the effect appears instantly.

Rate this example

No ratings yet — be the first.

Does this example work?

Snippets are useless without somewhere to paste them.

JustZix takes 2 minutes to install and runs your code on every matching page. No account, no payment.

Download free See use cases