Option 1: Choose a different theme

Just go to Settings > Extensions and Themes (shortcut: Ctrl+Shift+A) and choose a suitable theme.

Option 2: Use CSS to set the exact tab color

Firefox UI defaults to your system theme, which you may want to stick to or to only make a small adjustment. In this case, use userChrome.css:

userChrome.css in the chrome folder is a CSS file that can be used to change the way Mozilla applications' interfaces look. This file does not exist in a new profile. You can create it manually.

1. Enter about:config in the address bar and toggle toolkit.legacyUserProfileCustomizations.stylesheets to true.

2. Enter about:support in the address bar, look for profile directory and open it.

3. Enter the chrome directory (if absent, create it) and create the userChrome.css file with the following contents:

   #tabbrowser-tabs{
       background:  #900090 !important;
   }
   .tabbrowser-tab[selected] .tab-content{
       background:  #009090 !important;
       color:       #FFFFFF !important;
   }
   .tabbrowser-tab:not([selected]) .tab-content{
       background:  #FFFF00 !important;
       color:       #000000 !important;
   }
   

The colors — that are exaggerated for clarity — are in #RRGGBB format. Some generic names such as "green", "black" etc. also work.

When you restart Firefox the tab bar will look like this:

At this point, you may think that there is too much wasted space in the bar (although this really only changed colors). In this case, see compact mode workaround in Firefox.

If you would like to keep the button-like look, consider

#tabbrowser-tabs{
    background:  #900090 !important;
}
.tab-background[selected]{
    background:  #009090 !important;
}
.tab-background:not([selected]){
    background:  #FFFF00 !important;
}

which yields (with compact mode applied):

posted almost 3 years ago

CC BY-SA 4.0

2y ago

Quasímodo‭

1027 reputation 8 22 118 32