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 !important;
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 !important;
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: