[Question] How to make it ignore images?

[guastallaigor]

Hello, I've installed this in a project at my job but I'm trying to make it ignore images when dark mode is on, but it's not working for me, not sure if I'm doing something wrong:

All the rest of the system works, just the images it's wrong.

[coliff]

shouldn't that be: .darkmode-ignore img instead? Failing that try: .darkmode--activated .aui-avatar-inner {mix-blend-mode: difference;}

[guastallaigor]

Hello, thank you for your response, however I tried both and unfortunately they didn't work.

.darkmode--activated .aui-avatar-inner {mix-blend-mode: difference;}

darkmode-ignore img

With or without darkmode-ignore class on top of the img component. Not sure if I'm missing something.

[hexandcube]

Have you tried isolation: isolate; without .darkmode-ignore?

img {
    isolation: isolate;
}

[guastallaigor]

Hello, just tried it and didn't work aswell. I notice that the source code is already adding that, but for me is not working:

---

---

[cuongn265]

@guastallaigor I faced the same issue today. Not sure if we're in the same context but in my case I've set .darkmode-layer and .darkmode-toggle's z-index to a large number (500). Then I have to set img's z-index to be bigger to make it worked.

[guastallaigor]

Hello @cuongn265, sorry I'm currently on vacation, but when I get back I will try what you've said. Thank you for the tip :+1:

[paul1868]

@cuongn265 I got it to work by setting mix-blend-mode: difference on the span (in my case it was a div).

[p44v9n]

As noted above, isolation:isolate; isn't working. I added the below to get it to exclude all images on my site

body.darkmode--activated img, body.darkmode--activated .darkmode-ignore {
  mix-blend-mode: difference;
}

This also excludes anything with a class of darkmode-ignore.

Worth pointing out that this gives you a flash of the inverted image if you have the transition on.

[srameshr]

@sandoche Why did you close this? It's not yet working.

[hoochanlon]

html {
    filter: invert(100%) hue-rotate(180deg);
}
img,video {
    filter: invert(100%) hue-rotate(180deg);
}

[netizen-ais]

The solution from the last comment works almost flawless, but in my tests it will cause (updated) iPhones to go sluggish and even overheat.

[dantesadeghi]

For those who have tried the suggestions listed above hoochanlon's comment and not gotten it to work (I was one of them). This works for me:

// Making it so that dark mode does not invert my images. .darkmode--activated img { filter: invert(100%); }