Invert colors > header-menu

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

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, 9 months ago by sabsab.