Invert, but keep colors

I needed to embed some charts. The site offered dark mode, but the charts didn’t. They were iframes on transparent background, so black text and lines became impossible to read.

filter: hue-rotate(0.5turn) invert();

filter: invert() makes the text white, but also skews the colors like a film negative. So I added hue-rotate(0.5turn) to skew the colors back. Now, dark blue and red becomes bright blue and red, not yellow and cyan.

Bonus neat: turn is a nice unit for angles. Easier than a magic number like 180deg. It has been supported in every browser for ages.

Datawrapper on black background, without filter:

Datawrapper on black background, with filter: