Exclude Images from Darkmode

  • Resolved tifaspage

    (@tifaspage)


    4 years, 11 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 9 replies - 16 through 24 (of 24 total)
1 2
  • Plugin Author Jose Sotelo

    (@josesotelocohen)

    4 years, 3 months ago

    @kslv Hey! no problem, we all start somewhere.

    Your video has this class: youtube-responsive-container

    So you need to add z-index:1000 to .youtube-responsive-container in customize CSS or in style.css if you have a child-theme.

    I see that it’s working now, but just so you know.

    Cheers!

    Plugin Author Jose Sotelo

    (@josesotelocohen)

    4 years, 3 months ago

    @kaaleth Hello!

    Sorry, the plugin works as it should, but the thing with WordPress is that each installation is different to the other because of different themes, page builders, etc. so there’s no way for me to help you without looking at the website.

    Usually, what you would need to do is see if they are background-images of the div as it won’t work with those, or if instead of adding .darkmode-ignore to the tag itself you need to add it to the container <div>.

    Sadly, because this is a free plugin I can’t do a custom configuration for everybody, but I’m sure that you will be able to make it work with a couple of small changes on your website.

    Let me know if you manage to pull it off.

    Bests!

    appleguideweb

    (@appleguideweb)

    4 years, 2 months ago

    I’m trying to add Dark Mode to my website. This plugin works great for text and background but it appears to be inverting the colors of the photos. Is there a way to prevent the colors from inverting? I have read in this thread that changing the background to pure black will fix the issue. If so how do you go about changing these settings?

    My website is AppleGuideWeb.com

    Plugin Author Jose Sotelo

    (@josesotelocohen)

    4 years, 2 months ago

    Hello @appleguideweb

    You need to add .darkmode-ignore to the or the <div> containing the image.

    Also, you could try increasing the z-index to over 1000 to exclude it.

    This all depends on your theme, page builder, etc so I can’t give you a specific answer for you, but you can try out and I’m sure that you will find a way.

    Cheers!

    appleguideweb

    (@appleguideweb)

    4 years, 2 months ago

    Thanks for the quick response. Using the z-index worked for me in most places using the img class. There are still some other places the need a little patching.

    I added the following code to the Additional CSS section in the WordPress customizing:

    img { 
	position: sticky;
        z-index: 100;
}
    Muhammad Naufal

    (@falkia34)

    4 years ago

    Hello,

    My wesite is kweeksnews.com
    There are a lot of images on my web,
    and that’s all weird-colored.
    How can I solve this?

    Plugin Author Jose Sotelo

    (@josesotelocohen)

    4 years ago

    Hello @falkia34

    There’s no way for me to give you recommendations if the plugin isn’t enabled.

    But what I saw is that a lot of images in your home are background images, and the plugin won’t work on those, so you would need to use jQuery to z-index them on top of the darkmode layer when the darkmode is enabled.

    Muhammad Naufal

    (@falkia34)

    4 years ago

    Hi

    Sorry @josesotelocohen,
    The plugin is enabled, but only on the post. Could u try to open one of the post then give me some recommendations about what should I do?

    I’ve try this

    img { 
     z-index: 1001;
}

    But it doesn’t works

    Plugin Author Jose Sotelo

    (@josesotelocohen)

    4 years ago

    Hello @falkia34

    Sorry, can’t see it active even in posts. It would be easier if you just send the me url of the post.

Viewing 9 replies - 16 through 24 (of 24 total)
1 2
  • The topic ‘Exclude Images from Darkmode’ is closed to new replies.