Mobile dark mode issue

Please check this on a default unaltered theme before anything else there

4 minutes ago, Marc said:

Please check this on a default unaltered theme before anything else there

I found this issue - it happens when a background image is used (as I used) instead of a dark background color.

Maybe it's not a bug, but I think there shouldn't be this transparency in box dropdowns.

Have you changed any CSS? Those menus don’t use transparency by default.

That issue is happening because either the background colour for the off-canvas menus has been removed or the background variable has been broken in the CSS somewhere. The semi-transparent effect which you’re seeing is the “backdrop overlay” which is positioned below the menus but above the main content. 

13 minutes ago, Ehren said:

Have you changed any CSS? Those menus don’t use transparency by default.

I add in theme.css:

:root{--dark__i-box--ba-co: none !important;};

This is enough my background image is everywhere for dark mode and it looks very good. But I noticed this issue with drop down menus...
Now I've turned it off and selected a color close to my background image, but it's not the same...

Yes, adding that will remove the background color from all content areas, including popup boxes and the mobile menu.

I can look into using different variables for these elements so they don’t all rely on the box background color variable, but since the Theme Editor GUI doesn’t include a transparent/opacity feature, this issue will only occur when you specifically remove the colour in your CSS. 

1 hour ago, Ehren said:

Yes, adding that will remove the background color from all content areas, including popup boxes and the mobile menu.

I can look into using different variables for these elements so they don’t all rely on the box background color variable, but since the Theme Editor GUI doesn’t include a transparent/opacity feature, this issue will only occur when you specifically remove the colour in your CSS. 

So, I solved this issue for myself with this:

:where([data-ips-scheme="dark"]) .ipsNavBar > li > .ipsNav__dropdown {background-color: rgb(44, 114, 174);}
:where([data-ips-scheme="dark"]) .ipsMenu {background-color: rgb(44, 114, 174);}
:where([data-ips-scheme="dark"]) section#ipsOffCanvas--navigation.ipsOffCanvas {background-color: rgb(44, 114, 174);}
:where([data-ips-scheme="dark"]) div.ipsOffCanvas__panel {background-color: rgb(44, 114, 174);}
:root{--dark__i-box--ba-co: none !important;};

A couple of issues with that are:

1. You're forcibly removing the background from all areas using !important (which you should always avoid if possible), and then applying a "hard-coded" rgb background to areas which you want to keep.
2. "none" isn't a valid background-color value. This should be "transparent" instead.
3. The hard-coded rgb backgrounds won't change when you adjust the colours using the Theme Editor.
4. There's an extra ; at the very end

A safer solution would be to only remove the value from certain elements. And as always, make sure to comment your code so future-you and future-developers know why it was added 🙂 

/* Transparent boxes in dark mode */
:where([data-ips-scheme="dark"] :is(.ipsBox, .ipsWidget)){
    --i-box--ba-co: transparent;
    --i-widget--ba-co: transparent;
}

5 minutes ago, Ehren said:

3. There's an extra ; at the very end

Thanks for this extra, it works perfectly.