!important still not strong enough: images colors stay inverted-CodePudding

I wanted to make a dark theme for a website and used something similar to the code below to invert the colors of everything in <body> except for the images.

I can't find out why this code doesn't work as I expected: as you can see, even with the !important, the image stays inverted:

body { background-color: grey; }

p { color: white; }

.body {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
}
            
img {
    -webkit-filter: invert(0%) !important;
    -moz-filter: invert(0%) !important;
    -o-filter: invert(0%) !important;
    -ms-filter: invert(0%) !important;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div >
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
        </div>
        <p>The image above should be white</p>
    </body>
</html>

I wonder how important !important actually is, and what should I do to make the images not be inverted.

Of course I don't want to add a class/id to every image in the website, because even if I assume that that could solve my problem, it wouldn't be that efficient and easy to read.

CodePudding user response：

Well, it's simple, you have to invert once more!

We have learnt -1 * -1 = 1, just like that : Inversion*Inversion=Normal!
so set the 0% of image to 100%,

Tip: !important is not needed to override a rule, that is defined above it, this below rule will automatically override the above one, so you can even remove it.

Answer code:

body { background-color: grey; }

p { color: white; }

.body {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
}
            
img {
    -webkit-filter: invert(100%) !important;
    -moz-filter: invert(100%) !important;
    -o-filter: invert(100%) !important;
    -ms-filter: invert(100%) !important;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div >
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
        </div>
        <p>The image above should be white</p>
    </body>
</html>

CodePudding user response：

I know that the question is already answered and, as already mentioned, the point is that, written in that way, you have to perform the transformation twice. The point here is that the whole assumption to implement dark mode by inverting the colors is wrong.

What you are doing is just inverting a color, you are not making a color necessarily "darker".

What if you have a text with this color:

The inverted color would be:

That is not something that somebody is expecting from a dark mode. In that case you would add another "exception" to your transform your element back and implement it in a different rule.

My suggestion is to define different version of each element for both light mode and dark mode, it is more work to do, but the result is more clean and, most important, more predictable. Of course, if you prefer you can use a library or study some best practice to implement dark mode too.

CodePudding user response：

The issue is not about the !important tag at all.

Your first .body rule set invert on the body tag, which inverts your entire website. This is NOT the same as applying invert to all the elements.

This .body rule does not apply invert to each child element, so there is no invert on the image tag, which you can revert with the img rule.

What you should do is instead to apply invert(100%) to your image. Then you invert your entire webpage except images once. Images then get inverted twice(First because body is inverted, and then by the inverted(100%) on img. And inverted twice is the same as not inverted.

CodePudding user response：

You are applying the invert on a different object. You should invert the same object. Try this:

body { background-color: grey; }

p { color: white; }

.body {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
}
            
.body {
    -webkit-filter: invert(0%) !important;
    -moz-filter: invert(0%) !important;
    -o-filter: invert(0%) !important;
    -ms-filter: invert(0%) !important;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div >
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
        </div>
        <p>The image above should be white</p>
    </body>
</html>

you can add class to the body light and add the invert(100%) to it and have a different class dark and add the invert(0%) to it and just toggle it.