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.
Neat!
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.