Closed guastallaigor closed 4 years ago
shouldn't that be: .darkmode-ignore img
instead?
Failing that try: .darkmode--activated .aui-avatar-inner {mix-blend-mode: difference;}
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.
Have you tried isolation: isolate;
without .darkmode-ignore
?
img {
isolation: isolate;
}
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:
@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.
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:
@cuongn265 I got it to work by setting mix-blend-mode: difference on the span (in my case it was a div).
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.
@sandoche Why did you close this? It's not yet working.
html {
filter: invert(100%) hue-rotate(180deg);
}
img,video {
filter: invert(100%) hue-rotate(180deg);
}
The solution from the last comment works almost flawless, but in my tests it will cause (updated) iPhones to go sluggish and even overheat.
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%); }
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.