Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
Increase contrast between current and other tabs in Firefox
In most recent Firefox versions I find it hard to distinguish the current tab at a glance, especially if the screen is set at low brightness. That is because the colors used for the current and other tabs are too similar.
I found a couple of extensions (1, 2, 3) but they are not monitored for security by Mozilla and they require accessing history or visited websites data.
What are my alternatives to increase tab colors contrast?
2 answers
You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.
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;
}
0 comment threads
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.
-
Enter
about:configin the address bar and toggletoolkit.legacyUserProfileCustomizations.stylesheetsto true. -
Enter
about:supportin the address bar, look for profile directory and open it. -
Enter the
chromedirectory (if absent, create it) and create theuserChrome.cssfile 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):
0 comment threads