Skip to content

Add support for Dark Mode to the Merge Requests illustration

Relates to: #330195 (closed)

Merge Requests page has an illustration when it is in an empty state. This illustration doesn't support Dark Mode right now.

image

This illustration is part of a @gitlab/svgs npm package. It's loaded from an illustrations/merge_requests.svg path.

Important consideration: this illustration is lazy-loaded as an image using an img tag. That means it can not use CSS Custom Properties defined on the page that set colors for Dark Mode.

There are multiple ways to solve that:

  • Inline SVG. That'd increase served HTML size and prohibit us from caching this asset on this page. Also might impact some of the Core Web Vitals metrics, since it's not lazy-loaded anymore.
  • Change img to svg with use tag. That would mean that the illustration source should be served from the same origin as the page. SVGs do not work cross-origin unfortunately.
  • Use a hash to display a Dark Mode version of the asset (merge_request.svg#dark_mode). This implies the stylesheets are embedded within the SVG.
  • Use some JavaScript-based solution. Can be used if nothing else works out.
  • Some other path not listed here...
Edited by Stanislav Lashmanov