Invert empty state illustrations in dark mode
From gitlab#352500 (comment 856804606)
Currently most of the empty state illustrations look pretty bad in dark mode, mostly due to white/light gray backgrounds.
We could add the following rule, and the class that only does something in dark mode.
.dark-invert {
filter: invert(0.8) hue-rotate(180deg);
}
Some examples of the effect (some of these are using HAML or plain illustrations):
before | after |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
We could add a prop to opt-out for any illustrations it doesn't work well for.
Edited by Simon Knox