Hamburger menu is dark in dark mode

[mFo]

Having issues with my main menu on mobile devices. The hamburger is appearing dark in dark mode, so almost not visible. When I, in Blocs, choose light mode it’s dark, and choose dark mode, it’s light. But doesn’t work that way when accessed from my smartphone.

[Jerry]

@mFo

But doesn’t work that way when accessed from my smartphone.

Have you applied the new dark-theme mode? The Hamburger needs a bit of to make it work.
Your answer is here:

Revisit hamburger color

Now that blocs 4 is here I would like to revisit how to change the hamburger colors. There used to be an appearance to change from light to dark but that no longer is there in blocs 4. So, my first question how to change the hamburger from light to dark in blocs 4? Secondly, I would like to pick my own color for the hamburger. I have seen some posts that read I must change the page settings like in the following post. Hamburger Color Is this still the case and if so do I need to add the code…

…and here:
https://help.blocsapp.com/knowledge-base/dark-theme/

The result is:

[mFo]

Looks good in your example! However, the CSS-code in the post above is for changing color in the normal mode (non-dark mode), and changing that doesn’t help my dark-mode issue? I’ve tried the make a hamburger dark room class but since I don’t seem to be able to change the color from that class I don’t know how to make it work.

[Jerry]

Have you added the .dark-theme class to your fancy styled hamburger?

it should be something like this:

<style>
.dark-theme .custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(241,240,239, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
</style>

[mFo]

Thanks @Jerry! Halfway there (this seems to be really tricky!)

I’ve tried the following

1. Adding the code you suggested to the style section (but in green):

    .dark-theme .custom-toggler .navbar-toggler-icon {
   
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(25,255,140, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
   

2. Adding the custom class custom-toggler to the hamburger menu

3. Making a dark version of custom-toggler in the class manager (which gets named .dark-theme .custom-toggler)

Result: The hamburger icon gets that specified color in both light and dark mode. I’d like this to affect only the dark mode.

Thoughts: I guess the CSS code sets the color for both the classes custom-toggler and .dark-theme .custom-toggler (if that is a class of it’s own or just the combination of .dark-theme and .custom-toggler? not sure how this works) and that I would need to specifcy the code to only affect the .dark-theme .custom-toggler but not .custom-toggler…

[mFo]

Update: it’s working fine! It was the settings on my smartphones Firefox browser that was the issue. The code you suggested @Jerry is the solution! Thank you.

@Jerry

<style>
.dark-theme .custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(241,240,239, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
</style>