Matthew Miner's Basic-ish BlogMatthew Miner's Blog

Sometimes I might say something

Part of the radical UI changes that accompanied recent Firefox updates was removing of Windows 10 accent color from the tab and menu bar.

Personally, I was very keen on restoring the rectangular tabs that attach and actually look like tabs. Thankfully, I found a wonderful GitHub project and a helpful reddit comment that combined accomplished that.

However, this still me with this ugly black-on-white-on-gray mess:

Firefox 92 with gray tab toolbar

If you like contrast and being able to distinguish elements or would even just like some color in this drab UI, you probably want to change this. You could download a theme, but if you want to match your Windows color like before and have a consistent computer experience, you will need something better. I did some research on how to fix this, and finally came up with a solution using userChrome.css. I accomplished this with the following styles:

/* Show active colors on main menu bar */
.titlebar-color {
    background: -moz-accent-color !important;
    color: -moz-accent-color-foreground;
    fill: -moz-accent-color-foreground !important;

.titlebar-color {
    background: unset !important;
    color: unset;
    fill: unset !important;

If this is the only style you want, you can download this file by right-clicking and hitting "Save Link As...". Otherwise, you will need to make your own userChrome.css file, for which you can either get instructions from or from an earlier blog post of mine Either way, once you have your userChrome.css file set up and Firefox configured, you should be able to restart it and see colors again:

Firefox 92 with colored tab toolbar

(Edited January 28, 2022 to also style the plus button white in response to Firefox 96 breaking this as well. Obviously you can remove the color and fill properties if you have a light Windows accent color.)

Previous Post