Customizing Firefox's UI with CSS

[Josh]

Firefox just rolled out a redesign and some people want to change the looks of the tabs. It’s easy to do with CSS:

Firefox 89 tab appearance

All of Firefox’s UI can be modified with CSS. To view the styles, open the browser console (right click and choose “inspect element” or ctrl+shift+i). Find the settings and turn these checkboxes on:

Then press alt to open the menu on the top of the screen. (On Mac it’s probably already in the top bar.) Choose: Tools → Browser Tools → Browser Toolbox. Accept the request for “remote debugging”. A browser inspector will then open, which gives you access to inspect and modify the browser’s UI.

Save the custom CSS in a userChrome.css file to persist any changes made with the “Style Editor” tab in the Browser Toolbox.

See also: How to view a browser's default CSS styles

[Josh]

I followed the tutorial and am happy with the results. These are my current userChrome.css settings while using the new dark theme. (Fira Code is the font I use in my editor and terminal.)

/* Makes the current tab stand out. */
tab {
    font-family: Fira Code !important;
}

.tabbrowser-tab[selected] .tab-label {
    color: black !important;
}

.tabbrowser-tab[selected] .tab-content {
    background: #fcb731 ! important;
}

.tabbrowser-tab:not([selected]) .tab-content {
    background: #585060;
}

/* Turns off a lot of the UI animation */
*, *:before, *:after {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
}

[Josh]

Actually, that code above doesn’t take into account Firefox container tabs.

Some of the comments on Hacker News explain how to show the container colors:

  /* Make the tabs not blend into the background */
 .tabbrowser-tab:not([selected]) .tab-content {
     background: #58506040;
     border-radius: 4px 4px 4px 4px !important;
     margin-bottom: 4px !important;
     margin-top: 4px !important;
 }

Setting transparency on the background element doesn’t cover up the container color.

There are also some rules to revert the changes using CSS here:

https://twitter.com/Mailia/status/1399776195345006593

and here:

https://kevincox.ca/2021/06/03/firefox-proton-tweaks/

[Josh]

Here’s an updated version that works with container tabs:

*, *:before, *:after {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
}

tab {
    font-family: Fira Code !important;
}

.tabbrowser-tab[selected] .tab-label {
    color: black !important;
}

.tabbrowser-tab[selected] .tab-content {
    background: #fcb731 ! important;

    /* This line creates space for container tab indicators. */
    margin-top: 4px !important;
}

.tabbrowser-tab:not([selected]) .tab-content {
    background: #585060;
    margin-top: 4px !important;
}

[Josh]

Another interesting thing those settings I mentioned in the top post will do is show all the code for any installed browser extensions. Just go to the “Debugger” tab and scroll down in the “Sources” on the left.