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
Screen_Shot_2022-02-28_at_7.08.15_pm Screen_Shot_2022-02-28_at_7.08.40_pm
Screen_Shot_2022-02-28_at_7.07.56_pm Screen_Shot_2022-02-28_at_7.08.05_pm
Screen_Shot_2022-02-28_at_7.07.21_pm Screen_Shot_2022-02-28_at_7.07.52_pm
Screen_Shot_2022-02-28_at_7.09.01_pm Screen_Shot_2022-02-28_at_7.08.54_pm

We could add a prop to opt-out for any illustrations it doesn't work well for.

Edited by Simon Knox