Exclude Images from Darkmode

Resolved tifaspage
(@tifaspage)

6 years, 9 months ago
Dear developer,

first of all: thank you for the cool plugin and thanks to Sandoche for the method!
I already figured out how to change the colors to what I would like to have.

My only problem are the images because I want to exclude them from being affected by the darkmode. Basically it’s only the background and the text color that I wanted to adjust and I am really happy with the result. How do I “save” the images?

On Sandoche’s site https://darkmodejs.learn.uno/ I found the solutions
isolation: isolate;
and
mix-blend-mode: difference;
and tried both of them but none worked. Please tell me what I need to change.

Here’s what I did: Just like the color styles (which worked) I added
```
.darkmode--activated img {
    isolation: isolate;
}
```
in the style.css. There’s an error called “Unknown Property: isolation”. The same problem occurs with “Unknown Property: mix-blend-mode”.

I would like to exclude all images and emojis OR limit the darkmode to background color and text color, whatever is better to implement.
Please tell me what I need to do.

Thank you so much in advance!
Tifa

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 24 total)

1 2 →

Plugin Author Jose Sotelo
(@josesotelocohen)

6 years, 9 months ago

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 🙂

Thread Starter tifaspage
(@tifaspage)

6 years, 9 months ago

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 🙂

Tr3s
(@tuca_reis)

6 years, 7 months ago

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

Tr3s
(@tuca_reis)

6 years, 7 months ago

Is something that works perfectly in the plugin: https://www.ww.wp.xz.cn/plugins/darkmode/, although the plugin doesn’t work on mobile versions …

Plugin Author Jose Sotelo
(@josesotelocohen)

6 years, 7 months ago

@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!

its7eleven
(@its7eleven)

6 years, 4 months ago

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.

o28o
(@o28o)

6 years, 2 months ago

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.

o28o
(@o28o)

6 years, 2 months ago

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;
}

kslv
(@kslv)

6 years, 1 month ago

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.

Plugin Author Jose Sotelo
(@josesotelocohen)

6 years, 1 month ago

@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!

kslv
(@kslv)

6 years, 1 month ago

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?

Plugin Author Jose Sotelo
(@josesotelocohen)

6 years, 1 month ago

@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.
kslv
(@kslv)

6 years, 1 month ago
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 6 years, 1 month ago by kslv.
kslv
(@kslv)

6 years, 1 month ago

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.

kaaleth
(@kaaleth)

6 years, 1 month ago

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.