Exclude Images from Darkmode

Hello @tifaspage

Thank you so much for using the plugin and taking the time to leave a ticket.

I checked the website, and the issue is the custom colour for the dark mode.

As you can see here: https://cl.ly/07d257 when I use the black background, the images look good; this is because we use mix-blend-mode: difference to implement the dark mode.

I know that it isn’t ideal, and I’m sorry about that, but at the moment there’s no way to make the images look like the original when using a different colour for the background.

For some reason, the isolation CSS attribute doesn’t work on WordPress, so that’s why I had to go with the mix-blend-mode to keep the original colours of all the images by default.

Regarding emojis, only “” and “<iframes>” have dark mode-ignore implemented by default, but will investigate how to achieve the same with emojis ??

Sorry for not being able to solve the issue, but I hope that you can still enjoy the plugin, and want to thank you for taking the time to help us improve it.

Lastly, I invite you to create a review if you like the plugin, and let me know if there are any features that you would like to be added ??

Hello José,

thank you for the quick reply and for looking into it!
You already helped me a lot explaining I only need to use total black as the background color for keeping the images the same. I already did that now and it’s fine for me ??

It’s a pity isolation doesn’t work with WordPress ._. Maybe they’ll take care of that one day.

So thanks again for your detailed answer!
Have a great week and I’ll go write a review now ??

Hello! Great plugin! ??
Unfortunately I can not apply the above tip, there is no other way to isolate the images?

Is something that works perfectly in the plugin: https://www.www.ads-software.com/plugins/darkmode/, although the plugin doesn’t work on mobile versions …

@tuca_reis Hello!

I would have to take a look at your website, as it might require some custom code to make it work. Please, send it to [email protected] and I will see if I can make it work ??

Thanks!

Hello
Unfortunately I have the same problem. the most of my images are affected by your plugin. Is there a way to isolate them?

By the way i like your plugin.

Thank you for your help.

Hi guys.

tried it on dhammasukha.ru

and can’t exclude slider images from dark mode (colors become inverted)

when i try this

#featured-slider {
mix-blend-mode: difference;
}

it works but this works wierd as mentioned in some help

how can i use darkmode-ignore in this case? I’m not good at css and all that stuff.

Oh. i’ve fould the answer here
https://darkmodejs.learn.uno/

.darkmode–activated .logo {
mix-blend-mode: difference;
}

and it worked for me

.darkmode–activated #featured-slider {
mix-blend-mode: difference;
}

Sorry for bothering you, but can you explain to me how to exclude videos?
I am absolutely dumb in these questions and need a careful explanation.
As you can see on my blog: https://llewm.com/family-ielts-speaking-section-1-2-3/
I am not bothering about inverting images, it’s OK and I can draw more inverted-friendly images. But video… How exclude inverting colours in youtube videos?
Thank you in advance. I hope someone can help me. It would be nice to have a dark theme on my blog.

@kslv Hello!

You can add z-index: 1000 to the container of the video, or add the class darkmode-ignore.

let me know if it works.

Cheers!

You can add z-index: 1000 to the container of the video

But how to do that? In post html? I am absolutely zero, sorry. Can you explain how to do that?

@kslv that will depend on your theme or whatever you used to build it. I recommend you reach out to whoever built the website.

This isn’t anything advanced, it’s just a matter of you finding the setting to do it on your website.

reach out to whoever built the website.

I am going to bother you again. I know, my incompetence isn’t your concern. I bought this theme with the host and I can’t contact the real developer. I tried once and they didn’t answer.
But I can learn quickly. I have watched videos and read articles about z-index already.
As I understand I should fix style.css file, right? So I should find places in this file where I should write z-index: 1000. But wich places I should find? With the word “video”?
In addition, I found in theme customizing menu the “Additional CSS” block where I can write something. So maybe I should add something here?

And I noticed this happened only with videos where I use the “WP Video Sticky” Plugin. Videos I published without this plugin don’t invert colours.

Is it possible to somehow asking your help in finding the right places to add z-index?

• This reply was modified 4 years, 7 months ago by kslv.

Ok, I decided to get rid of WP Sticky Video Plugin. In that case, everything working well. Don’t spend your time. Maybe when I am more advanced in CSS and programming I can do sticky videos again.

Hello,

I have the same problem with the images. I have noticed, that after switch, the plugin is adding extra “darkmode-ignore” to the image class but does nothing.

The whole code look:

attachment-post-thumbnail size-post-thumbnail wp-post-image darkmode-ignore

I have tried a lot of fixes but still I cannot get it right. My webiste is at localhost so you will not see it. However its theme is WP Bootstrap Starter.

Thanks for support.