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)

Improve this question
5
  • 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, 2020 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
    – alexojegu
    Sep 17, 2020 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, 2020 at 21:46
  • 1
    I have replaced the screenshots with others with content added, @Daniel De Laney.
    – alexojegu
    Sep 18, 2020 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, 2020 at 19:13

2 Answers 2

Reset to default
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
2
  • 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
    – alexojegu
    Sep 22, 2020 at 10:58
  • Yeah not. darker shadow, you can try lighter colored shadows. something like a glow
    – Lakshmanan Palani
    Sep 22, 2020 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
2
  • 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, 2020 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
    – alexojegu
    Sep 22, 2020 at 10:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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