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:
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 */
#TabsToolbar,
#TabsToolbar toolbarbutton:not(:hover):not(:active),
.titlebar-color {
background: AccentColor !important;
color: AccentColorText;
fill: AccentColorText !important;
--toolbarbutton-icon-fill: AccentColorText
}
#TabsToolbar:-moz-window-inactive,
#TabsToolbar toolbarbutton:not(:hover):not(:active):-moz-window-inactive,
.titlebar-color {
background: unset !important;
color: unset;
fill: unset !important;
transition: none !important;
--toolbarbutton-icon-fill: unset
}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 userChrome.org 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:
(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.)
(Edited June 28, 2022 to also style tab buttons white if the tabs are scrollable or the window is not maximized.)
(Edited July 27, 2022 to fix it for Firefox 103 as Mozilla has inexplicably renamed the variables from -moz-accent-color and -moz-accent-color-foreground to AccentColor and AccentColorText.)
(Edited November 30, 2024 to fix it for Firefox 133 as Mozilla has further renamed things and moved the scroll buttons to the shadow DOM.)