We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I remove this weird "backlight" from the menu bar in Quantum?

  • 9 replies
  • 1 has this problem
  • 1 view
  • Last reply by derpnik

more options

I have the default Dark theme selected, and I experience this strange backlight effect with it that I don't with any other dark themes (one such example is "Black by MaDonna"). I find I experience the issue with all default firefox themes.

Does anyone know how to get rid of this? It's pretty annoying. All I want is a complete dark theme, much like FT DeepDark offered with versions of firefox 56 and below.

I've attached an image that illustrates the issue.

I have the default Dark theme selected, and I experience this strange backlight effect with it that I don't with any other dark themes (one such example is "Black by MaDonna"). I find I experience the issue with all default firefox themes. Does anyone know how to get rid of this? It's pretty annoying. All I want is a complete dark theme, much like FT DeepDark offered with versions of firefox 56 and below. I've attached an image that illustrates the issue.
Attached screenshots

Modified by derpnik

Chosen solution

If I use this, I don't have those gradients/bright spots. Could there be something in your userChrome.css file that is causing it?

#navigator-toolbox {
  background-color: black !important;
}

If you want to reduce the toolbar "fog" effect on a dark add-on theme, you could look at this:

/* MAIN TOOLBAR AND BOOKMARKS TOOLBAR MODIFICATIONS */
/* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > #nav-bar, 
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > #PersonalToolbar {
  background-color: transparent !important;
  background-image: none !important;
}
/* Remove top border of main toolbar */
#nav-bar {
  box-shadow: none !important;
  border-top: none !important;
}
Read this answer in context 👍 1

All Replies (9)

more options

Hi, actually that looks sorta cool. I would guess it amounts to how bad you want the dark theme and what you need to do to try and fix the issue. Please Refresh but do this 1st: Delete your Cookies and Cache and TEST.

then

TEST....... If no issues then Extensions which need to be added back in 1 at a time and tested ..... Or it is your Profile : Make a new one and test ...:

If is your Profile :

Note: Any customization will revert back to default, you will also need to reinstall Extensions.

Please let us know if this solved your issue or if need further assistance.

more options

Hi derpnik, do you mean the semi-translucent background behind the menu bar? I guess without that it would be black text on a black image, which wouldn't be very useful.

This is the closest thing I've seen to a totally dark theme (it involves the optional userChrome.css and userContent.css files): https://github.com/overdodactyl/ShadowFox/blob/master/README.md

more options

Hey guys, thanks for the help thus far.

Pkshadow: I know it's not a bug, it's an aspect of the default dark theme. As jscher2000 said, it's meant to allow you to see the black text.

Essentially what I'm asking boils down to: is it possible to edit the dark theme through userChrome.css or userContent.css to change this aspect of the menu bar? I've managed to do everything else I want to via userChrome.css and userContent.css.

Or better yet, the Black by MaDonna theme doesn't have this strange highlight, and uses white text for the menu bar buttons. I, however, find the colour of the navbar (if that's what it's called, I mean the section with the back/forwards/home/etc buttons, that holds the address bar) to be a bit too bright. Would I be able to alter that using the css files?

Thanks again for the help, guys. I'm quite ignorant when it comes to coding of most sorts.

more options

See whether these work with your existing modifications:

/* Menu Bar: Remove background fog*/
#main-menubar {
  background-color: transparent !important;
}
/* Menu Bar: Change text to nearly white */
#main-menubar > menu:-moz-lwtheme {
  color: rgb(249, 249, 250) !important;
}

That doesn't seem to affect the drop-downs, however...

more options

That did it, thanks man!

A new (much more minor) issue has presented itself, though.

This default dark theme also appears to have a white gradient coming in from both the top left and top right corners.

Is it possible to remove those?

Thanks again so far man!

more options

On mine, the dark theme still has a Windows 7 Aero title bar, so it's hard to see anything different going on in the corners as the whole bar has an uneven coloration. What is the trick to seeing it the way you see it?

more options

Ah, the gradient is from the Win7 Aero theme. I also get the gradient to the right of the tab bar though, shown in the first attached image.

I know it has to be possible to remove these gradients though, as the "Black by MaDonna" theme has a flat black title bar, as shown in the second attached images.

Essentially I'm trying to merge these two themes; the title bar and tab bar from the second image, and the colour of the area between the two bars of the first image. I find the second image's gray far too bright.

Is that possible?

Again I just want to say thank you for the help so far. Even if it can't be perfected, this is a massive improvement over what I had before.

more options

Chosen Solution

If I use this, I don't have those gradients/bright spots. Could there be something in your userChrome.css file that is causing it?

#navigator-toolbox {
  background-color: black !important;
}

If you want to reduce the toolbar "fog" effect on a dark add-on theme, you could look at this:

/* MAIN TOOLBAR AND BOOKMARKS TOOLBAR MODIFICATIONS */
/* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > #nav-bar, 
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > #PersonalToolbar {
  background-color: transparent !important;
  background-image: none !important;
}
/* Remove top border of main toolbar */
#nav-bar {
  box-shadow: none !important;
  border-top: none !important;
}
more options

jscher2000 said

#navigator-toolbox {
  background-color: black !important;
}

This did it! Dear lord, thank you so much man.

I don't regret upgrading to firefox 59 anymore.

I really can't thank you enough!