Increase contrast between current and other tabs in Firefox

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

I also had the problem that I couldn't tell which tab was active -- in particular in dark mode they looked all the same. To fix this I'm using

https://github.com/black7375/Firefox-UI-Fix

This set of scripts offers the opportunity to get the old Photon-style tabs back and, as all the colours are defined in a userChrome.css file, one can even tweak the colours to increase the contrast even more:

:root:not(:-moz-lwtheme) #titlebar {
  --mac-hover-bgcolor: ButtonFace;
  background: rgb(209, 209, 215)  !important; /* change here for title background */
}

I also like to hide the star button from the address bar:

/* Hide star button (bookmark) */
#star-button-box{
  display:none !important;
}

posted almost 3 years ago

CC BY 4.0

3y ago

samcarter‭

1501 reputation 34 40 214 135