Whats the best way to make a logo image that was made for a light background look good on a dark background in CSS? I know there's filter: invert(1), but that inverts all the colors, and the logo looks entirely different.
with filter: invert(1): 
Invert logo for dark background but keep color hue? (in pure CSS)
Viewed 638
1 Answers
You can use:
img.dark {
filter: invert(1) hue-rotate(180deg);
}
The hue-rotate turns all of your colors back to the hue before the invert, so for example the StackOverflow icon becomes:
original: 
invert(1): 
invert(1) hue-rotate(180deg): 
However, if your logo is especially complex this will likely not work for you, since all of your lighter colors will turn dark, e.g.:
original: 
invert(1): 
invert(1) hue-rotate(180deg): 
Related