Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Notifications
Mark all as read
Q&A

Increase contrast between current and other tabs in Firefox

+6
−0

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.

Tab bar

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?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

2 answers

+5
−0

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:

Tab bar after setting up the CSS

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):

Tab bar after setting up the CSS

Why does this post require moderator attention?
You might want to add some details to your flag.

3 comment threads

Windows Theme Color (1 comment)
About your point 2.2: instead of going to `about:support` and then looking for the profiles, it might... (2 comments)
Just an FYI with regard to more expansive Firefox UI styling (2 comments)
+2
−0

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 */
}

Screenshot of firefox tab bar

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

/* Hide star button (bookmark) */
#star-button-box{
  display:none !important;
}
Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »

This community is part of the Codidact network. We have other communities too — take a look!

You can also join us in chat!

Want to advertise this community? Use our templates!

Like what we're doing? Support us! Donate