Support » Plugin: Blackout: Dark Mode Widget » Exclude Images from Darkmode

  • Resolved tifaspage

    (@tifaspage)


    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 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Jose Sotelo

    (@josesotelocohen)

    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 🙂

    T3rS

    (@tuca_reis)

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

    T3rS

    (@tuca_reis)

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

    Plugin Author Jose Sotelo

    (@josesotelocohen)

    @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 soporte@inboundlatino.com and I will see if I can make it work 🙂

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.