[Tip] Enable Blue Titlebar on Active Window Only in Firefox, Keep Inactive Titlebars Grey
If you want to restore colored titlebar in Mozilla Firefox but want to show the blue titlebar on active window only and keep all inactive windows titlebars grey, this article will help you.
We know that Firefox comes with a grey colored titlebar or tab bar and doesn’t follow the colorization settings applied in Windows. For example, even if we enable colors on titlebars in Windows 10 or Windows 11 personalization settings as described here, Firefox keeps showing default grey colored titlebars.
Many Firefox users don’t like this behavior and want to restore colorized titlebar in Firefox. We have shared exclusive tutorials to re-enable colors on Firefox titlebars at following links:
Advertisement
[Tip] Enable Colorized Titlebar Again in Firefox 103 and Later Versions
[Tip] New Working Method to Restore Classic Theme and UI in Firefox 91 – 102 Versions
Above mentioned tutorials contain a CSS code (which is copied to a file userChrome.css present in Firefox user profile folder) and helps users in restoring colors on titlebars in Firefox but some users found a minor issue in the code as mentioned below:
The given code enables colors on both active and inactive windows titlebars in Firefox which makes it hard to distinguish between active and inactive windows. Many readers requested to create a code which puts the color on active Firefox window only and keeps the inactive window titlebars grey so that users can easily identify active and inactive windows.
Our reader “EOW” shared an excellent idea which fulfills the readers request. By putting a small condition :not(:-moz-window-inactive) (to check active/inactive window) in the existing code, we can force Firefox to show the default blue titlebar in active window only and the remaining inactive windows will keep showing grey titlebar as shown in following screenshots:
Different Colored Titlebars on Active and Inactive Windows in Firefox + Default Floating Tabs:
Advertisement
Different Colored Titlebars on Active and Inactive Windows in Firefox + Classic Connected Tabs:
If you also want to have this feature in Firefox and want to show Blue and Grey colored titlebars on active and inactive windows respectively, following steps will help you:
New Code to Show Colored Titlebar on Active Window Only in Firefox
So if you want to enable colored titlebar on active windows only and keep inactive window titlebars grey in Firefox, you’ll need to use following updated code in userChrome.css file:
.titlebar-color:not(:-moz-window-inactive){
color: AccentColorText;
background-color: AccentColor;
}
Once you apply above mentioned code, it’ll enable colored or colorized titlebar again on active windows only in your Firefox web browser.
PS: Following article contains full step-by-step instructions about how-to use the CSS code in Firefox:
[Tip] Restore Classic Theme and UI in Firefox 91 and Later Versions
NOTE 1: If you are using older versions of Firefox (91-102 versions), you’ll need to use following code to have colored titlebar on active window only:
.titlebar-color:not(:-moz-window-inactive){
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
NOTE 2: Following is the full code to restore colorized titlebar with classic UI (connected tabs, etc) in Firefox 103 and later versions:
.titlebar-color:not(:-moz-window-inactive){
color: AccentColorText;
background-color: AccentColor;
}
.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
min-height: 0px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}
BONUS TIP: You can also check out following article to set any desired color in Firefox titlebar:
[Tip] How to Change Background Color of Tab bar or Title bar in Mozilla Firefox
Thanks, it’s working perfectly.
Hi, VG
Is it secure to use “firefox-translations” by jelmervdl extension from github? I didn’t find it in Firefox add-ons.
Thanks.
^^ Check following:
https://www.askvg.com/mozilla-is-working-on-a-built-in-translator-in-firefox-heres-how-to-enable-it/
thx a lot