This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Using userChrome to color the toolbars and text on Firefox

  • 12 replies
  • 1 has this problem
  • 305 views
  • Last reply by teeness

more options

My system: Windows 10 Version 1809. Firefox version: 64.0

HI.

I'm looking for code I can insert into a userChrome.css file to change the color of the top of the Firefox browser to a light/medium blue. I have the menu bar toolbar and also the tab bar on top of the browser that need to be colored this way. I also need the menu bar text (file, edit, view, history, bookmarks, tools, help) and text that appears in tabs and the minimize maximize close buttons all colored black.

I would like to make it appear like in the image below.

This actually used to be the way that Windows 10 colored FF when you select the windows 10 background and let it choose an accent color. But starting with Windows 10 version 1809 it has changed the way it colors it... making it a very dark blue. Trying to customize the color lighter via personalization settings yields problems in other elements like start menu since it makes everything lighter. I could also just use a Firefox theme but I'd rather not and try and do it via userchrome.

This is what I have so far:

toolbar#TabsToolbar {

   -moz-appearance: none !important;
   background-color: #30A8F0 !important;

}

  1. toolbar-menubar, #menubar-items, #main-menubar {

background-color: #30A8F0 !important; background-image: none !important; }

This makes the menu bar and tab bar blue but the text on tabs, the menu bar and the minimize close buttons are all white. Is there code I can add to makes them black like in the image below?

Thank you.

My system: Windows 10 Version 1809. Firefox version: 64.0 HI. I'm looking for code I can insert into a userChrome.css file to change the color of the top of the Firefox browser to a light/medium blue. I have the menu bar toolbar and also the tab bar on top of the browser that need to be colored this way. I also need the menu bar text (file, edit, view, history, bookmarks, tools, help) and text that appears in tabs and the minimize maximize close buttons all colored black. I would like to make it appear like in the image below. This actually used to be the way that Windows 10 colored FF when you select the windows 10 background and let it choose an accent color. But starting with Windows 10 version 1809 it has changed the way it colors it... making it a very dark blue. Trying to customize the color lighter via personalization settings yields problems in other elements like start menu since it makes everything lighter. I could also just use a Firefox theme but I'd rather not and try and do it via userchrome. This is what I have so far: toolbar#TabsToolbar { -moz-appearance: none !important; background-color: #30A8F0 !important; } #toolbar-menubar, #menubar-items, #main-menubar { background-color: #30A8F0 !important; background-image: none !important; } This makes the menu bar and tab bar blue but the text on tabs, the menu bar and the minimize close buttons are all white. Is there code I can add to makes them black like in the image below? Thank you.
Attached screenshots

Modified by teeness

Chosen solution

Okay, I don't know when I can get hands on Windows 10.

Meanwhile, could you test with the built-in "Light" theme? It has black text on a light background, and may still ignore Windows 10 color settings. See: Built-in themes in Firefox - alternative to complete themes.

Read this answer in context 👍 1

All Replies (12)

more options

One other question... I attached a screenshot that I would like to remove/delete. I want to replace it with another one. But when I delete it when I edit that post... it shows it has been removed but the post still includes it. How can i delete the screenshot?

more options

For userChrome.css you would have to go to a site that hosts css file to find one that would match what your looking for. userChrome.css is user modified to firefox and not part of the default firefox Browser itself.

more options

Thanks WestEnd.

I'm looking for someone who knows that here... I've seen people ask the question on this forum and then they are given code suggestions since they are familiar with userChrome code... with far more complex things than this.


It should be simple... I just need commands that color in the menubar text and tab text and minimize, maximize... I already can color the toolbars

Modified by teeness

more options

teeness said

My system: Windows 10 Version 1809. Firefox version: 64.0
I'm looking for code I can insert into a userChrome.css file to change the color of the top of the Firefox browser to a light/medium blue. I have the menu bar toolbar and also the tab bar on top of the browser that need to be colored this way. I also need the menu bar text (file, edit, view, history, bookmarks, tools, help) and text that appears in tabs and the minimize maximize close buttons all colored black.
...This is what I have so far:
toolbar#TabsToolbar
{
    -moz-appearance: none !important;
    background-color: #30A8F0 !important;
}

#toolbar-menubar, #menubar-items, #main-menubar {
background-color: #30A8F0 !important;
background-image: none !important;
} 

This makes the menu bar and tab bar blue but the text on tabs, the menu bar and the minimize close buttons are all white. Is there code I can add to makes them black like in the image below?

I'm having trouble replicating the problem on Windows 7. The text in my bars is black by default.

What Firefox "theme" are you using as your starting point -- Default, Light, Dark -- and does it make any difference if you switch among them?

Added a screenshot from Windows 7

Modified by jscher2000 - Support Volunteer

more options

I'm using default theme.

The issue in Firefox only happens in Windows 10 version 1809.

It is the latest version of windows 10 that has been very troubled.

This is what happens to firefox in windows 10 version 1809 see image attached:

Notice the very dark blue and white text on the top two tool bars. This is a problem with Windows 10 version 1809 accent color picker... if I try and customize via win 10 settings, it makes other areas too light.

That said, I don't want to use a theme.. I'd rather correct with userchrome

Modified by teeness

more options

It should be like this :

https://prod-cdn.sumo.mozilla.net/uploads/images/2018-12-24-09-12-10-09286a.png

I can make it all light blue on top with my userchrome code commands that I posted in first post... but the text of menubar (file edit, view etc ) and tab text and right side x button are colored white... I'd like to make them black.. black text.

Modified by teeness

more options

Actually... the tab bar text is fine ... sorry about that ....it is black with my userchrome modification.

It is just the menubar text that is white that I want black.. that and the minimize max close button ... see image (this is with userChrome.css file with the two codes I have above).

Is there some kind of userChrome text command that can be used along with my other code to make the menu bar text and min max close black... that would duplicate the way it has always looked with windows 10 accent color picker before this apparent bug win 10 1809 now has.

Added, would be great if I could include code that would keep menu bar text etc black when FF is not active window ( in addition to the normal active window).

Modified by teeness

more options

Chosen Solution

Okay, I don't know when I can get hands on Windows 10.

Meanwhile, could you test with the built-in "Light" theme? It has black text on a light background, and may still ignore Windows 10 color settings. See: Built-in themes in Firefox - alternative to complete themes.

more options

Yes all the themes work fine... the light theme does show black text. The issue seems related to windows 10 accent color picker and default theme. And my userchrome code being inadequate to address the menu bar text color... it stays white because that is what windows 10 version 1809 has chosen for it since it is on a very dark blue background. I have to override via userchrome not only the dark blue that win 10 v1809 has chosen for the toolbars (and make them light blue), but also the white text it has chosen for menu bar text and max, min buttons... to make it black.

Like I mentioned, I can customize the color lighter blue via win 10 personalization options, which will give FF a light blue color and black text..but then this affects other areas (start menu etc) negatively since it lightens all the colors. It seems to be a bug in Win 10 version 1809 since it has never colored FF like this with same settings. It always makes a light title bar color.

Added:

If I enable light theme with my userchrome file active, then it colors the menu bar black and min max black while my userchrome file makes the toolbars a light blue. However, since it is a theme, it seems to make FF load slightly differently (a very slight lag)... just wondering if there was a way with userchrome to make the text black without having to change to light theme - basically while keeping it on default theme.

Modified by teeness

more options

teeness said

If I enable light theme with my userchrome file active, then it colors the menu bar black and min max black while my userchrome file makes the toolbars a light blue. However, since it is a theme, it seems to make FF load slightly differently... just wondering if there was a way with userchrome to make the text black without having to change to light theme - basically while keeping it on default theme.

What do you mean by slightly differently?

Rules in userChrome.css can probably change the menu bar text color. No idea about the 3 buttons.

more options

What I mean is, when I launch FF with default theme... it instantly launches and starts loading. When I have a theme on it.. any theme besides default theme.. everything else being the same, there is a slight delay probably of 3/4's of a second maybe less before it launches and starts loading. The actual load time of page is the same.. it just doesn't have the nice instant effect of launching... not really a big deal. Just thought I would address it totally with userchrome if possible.

When I include the userchrome file to color the toolbars..while keeping default theme active.. there is no slight lag effect.. it is the same as if I am using default theme with no userchrome.

Anyway, maybe best solution for now is to use light theme with my userchrome file and just deal with a slight launch lag since overall load time is the same. One benefit I've noticed is that active window or inactive, it remains the same light blue with black text, and I don't mind that.

I'm hoping Windows 10 fixes this issue in future since all title bars and tool bars of browsers like FF have been this lighter blue color with black text since I've been using Windows 10 when I allow win 10 to pick an accent color based off the blue windows 10 background. It is only version 1809 with this sudden change to a much darker title bar color regardless of background chosen. And like I said, if i try an "customize" the darker color lighter, other areas that use the accent color change to a lighter color than normal (like the start menu) and they don't look good to me. I made a post about it on their feedback hub. Thanks.

Modified by teeness

more options

I think I am going to just do that... use a light theme with my light blue userchrome file. This way I have the blue with the black text. I was not able to find the same shade in solid color themes so this works just as well (save for a very slight launch lag which is the case for any theme other than default in my experience). Thanks for the help guys.

Modified by teeness