1

I am trying to make a website with light and dark modes. On small screens I am using a hamburger menu. When I click outside the hamburger menu it closes, to indicate it I change the opacity and in the light mode it looks good but in the dark mode doing the same does not seem the best.

So the question is if there is any recommendation to implement a hamburger menu with dark mode, or what would it be the better approach.

Light mode: light

Dark mode: dark

Dark mode (big screen): Dark mode (big screen)

Dark mode (white overlay): Dark mode (white overlay)

Dark mode (dark gray): Dark mode (dark gray)

  • 2
    Perhaps it wouldn't look so bad if you actually had some content? End of the day, dark mode is dark. Having said that, black isn't the best colour for a dark mode, try a dark grey instead. – musefan Sep 17 at 13:19
  • 1
    I don't like not being able to differentiate the header from the left burger menu. I will try to use a dark gray, I am using GitHub color system currently. Do you know some color system with colors for light and dark mode? Thanks @musefan – xeladejo Sep 17 at 17:40
  • It would be easier to understand what's happening in these screenshots if there was some sample content added. – Daniel De Laney Sep 17 at 21:46
  • 1
    I have replaced the screenshots with others with content added, @Daniel De Laney. – xeladejo Sep 18 at 12:49
  • In dark mode, have you tried using a transparent white to create the same effect? I can't see what you're using for the dark version, as you say it's not effective! – J4G Sep 18 at 19:13
2

There are unique ways to solve this issue. Blurring the background is one of them, but we cannot control whats going to be in background & it may not always be seamless based on the speed of the internet - how the transition is going to be. Solutions i would suggest are:

  1. Using a lighter color than black with a border
  2. A lighter color shadow for the overlay - since the hamburger menu is in an elevation - shadows will help.
| improve this answer | |
  • Yeah, I will choose use lighter color than black as on my last screenshot (I possibly rethink the dark mode colors) I will also try to use a shadow, but they are not usually very effective on dark mode. @Lakshmanan Palani – xeladejo Sep 22 at 10:58
  • Yeah not. darker shadow, you can try lighter colored shadows. something like a glow – Lakshmanan Palani Sep 22 at 11:31
1

Finally, I am thinking of keeping the overlay without any effect and adding a blur effect to the content container. I don't know if it can be a bit annoying for the eyes ...

I would like to know opinions about this approach (@musefan, @Daniel De Laney, @J4G), thanks. I hope don't have performance troubles and I continue open to suggestions.

Light mode: Light mode

Dark mode: Dark mode

| improve this answer | |
  • 1
    I don't think this improves anything from the first version you made, and the blurry images aren't a very pleasant sight either. I would recommend sticking with the dark overlay and using very dark greys for your dark theme, not pure blacks. – Jos van Weesel Sep 21 at 8:59
  • Yeah, I will choose use lighter color than black as on my last screenshot (I possibly rethink the dark mode colors) I will also try to use a shadow, but they are not usually very effective on dark mode. @Sir Exotic – xeladejo Sep 22 at 10:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.