DEV Community

Discussion on: One line - Dark Mode using CSS

Collapse
 
photocoder profile image
Dimas

Hello!
That is amazing simple decision!
Great! Thank you very much.
But it is also converted all my background images...
Is it exist any option for filter them?

Collapse
 
akhilarjun profile image
Akhil Arjun

Yeah. You have to apply invert filter again on images to re-colorize them and turn back the hue a whole of 180deg.
We can do that by selecting all images so

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}
Collapse
 
pau1phi11ips profile image
Paul Phillips

I think he was referring to CSS background-image not img's

Thread Thread
 
akhilarjun profile image
Akhil Arjun

I get it. Well, there are a couple of ways we can achieve that too. If it is just a div with a background-image set. Then applying filter would not be a problem there, but if that element has some content then the filter might affect it all too. So we might have to check for specialized solutions.
There is a beautiful article on css-tricks regarding the same css-tricks.com/apply-a-filter-to-a....

Hope that helps 😀

Thread Thread
 
photocoder profile image
Dimas

Yes, correct.
I found only the way to add extra "non-dark-mode" class to turn them back...