[Tip] How to Change Background Color of Tab bar or Title bar in Mozilla Firefox
If you want to change or customize default background color of tab bar or title bar in Mozilla Firefox web browser, this tutorial will help you in applying any desired color to these toolbars in Firefox browser. You’ll also be able to restore colored (also referred as colorized) tab bar or title bar back in Firefox newer versions with the help of this article. We’ll also tell you how to force Firefox newer versions to respect and follow Windows 10 accent color in its tab bar and titlebar.
Newer versions of Firefox browser come with new Proton design UI. As a part of the new design UI, the tab bar or title bar has become White or light grey colored as shown in following screenshot:
Advertisement
The tabs are now disconnected or floating which look like buttons and the vertical spacing has also increased a lot in all menus.
We posted an exclusive tutorial to disable Proton design and restore classic UI and theme in Firefox newer versions which allows you to disable floating tabs and connect the tabs to toolbar similar to old versions. It also helps you in disabling extra spacing or padding between menus.
[Tip] New Working Method to Restore Classic Theme and UI in Firefox 91 and Later Versions
Once you follow the above mentioned tutorial, you get following classic interface back in Firefox:
But some readers complained that they also want to restore colored tab bar or title bar in Firefox. They are not happy with the White or gray background color of tab bar in Firefox newer versions.
In newer versions of Firefox, the tab bar is always grayish in color whether the Firefox window is active or inactive. Also Firefox no longer respects Windows 10 system theme’s accent color.
Advertisement
For example, even if the user has selected Windows 10 Settings to show accent color on title bar and window borders (How-to Guide), Firefox no longer follows it. The tab bar or title bar is always White or grey in Firefox.
In previous versions of Firefox, the tab bar used to respect or follow Windows 10 accent color setting.
So in this tutorial, we’ll tell you how to restore colored tab bar or titlebar back in Firefox newer versions. You’ll be able to force Firefox to respect or follow Windows 10 accent color setting and show the same color in its tab bar or title bar as shown in following screenshot:
Also we’ll tell you how to set any desired custom color in tab bar or title bar in Firefox browser. For example, you can get a blue, black, green, red, orange, yellow, pink or any other colored tab bar or title bar in Firefox as shown in following image:
If you also want to change the color of tab bar or title bar in Firefox browser and want to restore colorized tab bar in Firefox newer versions, following steps will help you:
STEP 1:
We’ll take help of a built-in css file called userChrome.css to set or change desired color for tab bar or title bar in Firefox. This file is created under chrome folder in your Firefox profile folder as mentioned here.
To learn how to create and use userChrome.css file in Firefox, first follow all the steps given in following article:
[Tip] New Working Method to Restore Classic Theme and UI in Firefox 91 and Later Versions
STEP 2:
After following above mentioned article, you’ll get back old classic theme and UI in Firefox.
Now we’ll modify the userChrome.css file to set or change the color of tab bar or title bar in Firefox.
Open userChrome.css file in Notepad or any other text editing tool and do as following:
CASE 1: If you want to restore colored tab bar and title bar in Firefox and want to force Firefox to always follow Windows 10 accent color settings, put following code at the top of userChrome.css file:
.titlebar-color{
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
You can then change accent color from Blue to any other color using Windows 10 Settings -> Personalization -> Colors page and Firefox will use the same background color for tab bar and title bar.
CASE 2: If you don’t want to use Windows 10 accent color in Firefox tab bar or title bar and want to set your own desired color in Firefox, use following code:
.titlebar-color{
color: #ffffff;
background-color: #000000;
}
Above mentioned code will set Black tab bar or title bar with White font color in Firefox. You can change or replace the #000000 value of background-color variable with the hex code of any other desired color to set that color as background color of tab bar or title bar. Similarly, you can change #ffffff value of color variable to #000000 to set tab font color to Black.
For your convenience, we are providing hex code for popular colors which you can use in the code:
Black -> #000000
Blue -> #0000FF
Brown -> #A52A2A
Cyan -> #00FFFF
Dark Blue -> #00008B
Gray or Grey -> #808080
Green -> #008000
Light Blue -> #ADD8E6
Lime Green -> #00FF00
Magenta -> #FF00FF
Maroon or Dark Red -> #800000
Olive -> #808000
Orange -> #FFA500
Pink -> #FFC0CB
Purple -> #800080
Red -> #FF0000
Silver -> #C0C0C0
White -> #FFFFFF
Yellow -> #FFFF00
My personal favorite color combination is #CECECE for background color and #000000 for font color.
PS: You can find the hex code for any desired color online or using image editing software programs. You can also ask in comments section for the hex code of your desired color and we’ll provide the correct hex code.
Once you finalize desired color in userChrome.css file, save the file.
Now restart Firefox browser and you’ll see your desired color applied in the tab bar or title bar in Firefox browser.
Also Check:
[Tip] Restore “Compact Mode” Density Option in Firefox Customize Window
[Tip] Restore Classic Print Preview Dialog Box UI in Mozilla Firefox
[Fix] Restore Real Working Search Box on New Tab Page in Firefox 89 and Later
[Tip] How to Restore “View Image” Option to Context Menu in Mozilla Firefox
My Firefox address toolbar has turned brown and text is unreadable. I have not knowingly changed any of my settings. It just happened. I am visually impaired and I am sick and tired of companies (read Microsoft et al) making changes without warning or explanation, let alone ‘ undo’ function. I prefer to set and forget… no tweaking… kiss principle. Life is too short to waste time trying to fixed forced changes, particularly if no warning is given. These people who design these changes need to consider and perhaps walk a mile in another person’s shoes to see what it feels like. Can you help revert my Firefox address toolbar back to default… simply. Complex instructions will not help in my case.
^^ Did you try following?
https://www.askvg.com/tip-new-working-method-to-restore-classic-theme-and-ui-in-firefox-91-and-later-versions/
Updated to 92.0.1. Used the restore classic theme CSS method. Under Win7 x64, the upper left and upper right corners of the tab bar background are the selected color (#000000), but the inner 95% of the bar is still that ugly gray color foisted upon us by the Firefox devs. In dark mode, that gray background is idiotic. Any idea how to make FF 92 respect the CSS code and actually get rid of that gray tab bar background when running on Win7 x64?
Thanks, works great. The tab bar is now blue both in active and inactive Firefox window. How can I change the color of the tab bar in inactive Firefox window?
These are asinine and unnecessary changes that Firefox is peppering into their latest versions. Why do they do this? Don’t they know (yet) that people have better things to do than keep piddling around with various settings, trying to make the latest FF look, feel and act like the ones they’ve used for years? This is annoying, aggravating and time-wasting! FF should find something better to do than make cosmetic changes in order to have an excuse to “upgrade” us yet again! Extremely useless and tooth-grinding to have to deal with such nonsense!
And BTW, why don’t they do something useful, like offer a way to make the BUTTONS bigger and more legible instead of these anemic skinny barely visible things? Have spent a week trying to find a way to change the buttons so I can SEE them, and have yet to find any help!
I followed the css instructions in https://www.askvg.com/tip-new-working-method-to-restore-classic-theme-and-ui-in-firefox-91-and-later-versions/ and the update for version 103+. It worked fine for the most part, but what I don’t want is that tabs and the background/accent color (Widows 10 blue) are the same. The discussion is confusing. What is being called the “title bar”? We have a Menu Bar, a Bookmarks bar, a Tool bar with a URL field, and Tabs. I’ve changed the hex code for background color, but it changes tabs to the same color. Is there a way to make the Tab color white, leaving the background color something else? Dark color tabs (Windows 10 blue) are less readable. I’m considering restoring my computer to yesterday and living with FF version 88 until it no longer works. I’ve spent the afternoon futzing with css and Windows colors. Thanks!