DEV Community

Cover image for Firefox: change the active tab color
Ellis
Ellis

Posted on • Updated on

Firefox: change the active tab color

On the Firefox browser, especially with some themes, the active (ie. currently selected) tab can be difficult to distinguish, because it may have a similar background colour as the other tabs.

One simple and direct solution is to modify the "userChrome.css" file manually, through the following steps.

(Some Firefox and CSS knowledge is assumed.)

  1. On Firefox, go to the "about:config" page (by typing "about:config" in the url box), enter "toolkit.legacyUserProfileCustomizations.stylesheets" in the searchbox, and set the value to "true".

  2. Again on Firefox, go to the "about:support" page, look for "Profile Folder", then open this folder.

  3. Inside this folder, look for (or create) a "chrome" folder, and inside the "chrome" folder, look for (or create) a "userChrome.css" file.

  4. Inside the "userChrome.css" file, carefully add the following 3 lines at the top level (crimson or your favourite colour) :

.tabbrowser-tab[selected="true"] .tab-background {
  background: crimson none !important;
}
Enter fullscreen mode Exit fullscreen mode
  1. Restart Firefox.

Top comments (0)