Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1282903

    Hi there,

    hope ur all doing well.

    I made a simple lightweight website with Enfold using blackout.js for darkmode (bottom left).

    Is it possible to invert the colors of the header-menu (Background, Logo, Fonts, Borders) with mix-blend when dark-mode is activated? Everything is mix-blending except the header and I just can’t find the code which is blocking this. I just like to invert everything including the header.

    Thanks in advance for your help,
    Sam

    • This topic was modified 3 years, 10 months ago by sabsab.
    #1283463

    Hey sabsab,

    Thank you for the inquiry.

    We are not really sure what to check or how the header should actually look, but we noticed this class name “darkmode-ignore”. Did you add it manually? Would you mind providing a screenshot of the issue? Please use image hosts such as imgur or dropbox for the screenshot.

    Best regards,
    Ismael

    #1283473

    Hi Ismael,
    thank you for helping me out. The class “darkmode-ignore” should be the key I guess :)

    The class is generated automatically by darkmode.js. Is there any way of just removing the class? I can do it but can u tell me where to find the class “darkmode-ignore” I can only see it in dev tools. I am using a child theme.

    Here is a link with two Screenshots: https://imgur.com/a/TWTa2m5 (dark – no inverting header)

    I think we got it if I can find the class “darkmode-ignore” to remove it.

    Greetings,
    Sam

    #1283863

    Hi,

    Thank you for the update.

    The class name is being added in the logo markup.

    <span class="logo"><a href="http://wordpress.p577894.webspaceconfig.de/"><img src="http://wordpress.p577894.webspaceconfig.de/wp-content/uploads/2021/01/ae-logo-2.svg" alt="p577894" title="" class="darkmode-ignore" width="300" height="100"></a></span>
    

    It is possible that the plugin cannot invert images dynamically, and might be the reason why the logo stays the same when changing theme.

    Best regards,
    Ismael

    #1283937

    Hi Ismael,

    thank you. But I thought you meant that the class was added to the header not only to the header logo. blackout.js can invert Images from enfold dynamically too but it ignores the logo which is good in some cases. In my case, I would like to tweak the full header with menu background border etc. to get inverted too just like the footer and the whole page.

    I am still working o a solution. its frustrating because if the site goes black it breaks the design (border-bottom of the header is still black and now hidden in dark mode because it doesn’t get inverted. :()

    Best regards,
    Sab

    EDIT*
    You can close this one. We figured it out :)

    /* Blackout Configs */
    .darkmode–activated #main-image{
    mix-blend-mode: difference;
    }
    .darkmode–activated #header, .darkmode–activated .avia-menu-text{
    color: white !important;
    }
    .darkmode–activated .header_bg{
    background-color: black !important;
    }

    .darkmode–activated .av-hamburger-inner::after, .darkmode–activated .av-hamburger-inner::before, .darkmode–activated .av-hamburger-inner{
    background-color: white !important;
    }

    .darkmode–activated #footer-style{
    background-color: #ffffff !important;
    }

    .darkmode–activated .avia_textblock > p > span {
    color: black !important;
    }

    Thank you!

    • This reply was modified 3 years, 10 months ago by sabsab.
    #1284136

    Hi sabsab,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Invert colors > header-menu’ is closed to new replies.