I don't have a lot of UI/UX experience and am trying to learn as I work on my personal website.

With a light background, I 100% agree with the advice to use a darker navbar, as that helps to sort of visually "anchor" or "hug" the page's contents:

enter image description here

I'm struggling to pick a good color for my navbar in my dark theme, though. Here's what it currently looks like on the same page:

enter image description here

I feel like there isn't enough contrast with the background. Google's material theme guide uses a lighter color for the navbar in dark mode to give the user a sense of elevation. That's what I did with my project cards, and I think it looks good. I tried it out with the navbar:

enter image description here

Two related questions:

  1. Does this look worse, or are my eyes inexperienced?

  2. Is it inconsistent to have a light theme with a navbar darker than the main background but to have a dark theme with a navbar lighter than the main background?

1 Answer 1


I also prefer the bottom one, with the lighter navbar. There's more contrast, both for the bar itself and for its shadow.

As for consistency, you could think of the dark theme as generally inverting all the colors, which also flips the relationships, like what happened here.

  • The bit about the relationships getting inverted makes sense. Thank you!
    – AlexH
    Dec 7, 2019 at 1:23

Your Answer

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

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