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.
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
tosvg
withuse
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