[Tip] Enable Colorized Titlebar Again in Firefox 103 and Later Versions
Some of our readers reported that the previous CSS code to restore or enable colorized titlebar has stopped working in recently released Firefox 103 version. In this article, we’ll tell you how to fix the issue and restore colored titlebar again in Firefox 103 and later versions.
When Firefox 89 version was released, it came with a brand new theme or UI called Proton Design UI which featured rounded and disconnected tabs called floating tabs along with other UI changes such as default grey titlebar. Many users didn’t like the new UI and we posted a tutorial to restore classic UI in Firefox here in this article. But after release of Firefox 91 version, the old method to restore classic UI stopped working. We again shared a new working method to restore old classic UI in Firefox 91 and later versions which can be found at following link:
[Tip] New Working Method to Restore Classic Theme and UI in Firefox 91 and Later Versions
The tutorial contains a CSS code which is copied to a file userChrome.css present in Firefox user profile folder.
We also shared an exclusive code to restore colorized or colored titlebar in Firefox which can be used to enable Windows accent color in Firefox titlebar or tab bar.
Following is the required code:
.titlebar-color{
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
Unfortunately, the above mentioned code no longer works in recently released Firefox 103 version. Our readers King, Piotr, Paul, nell and Larry posted comments regarding this new issue. The previous code to enable colorized titlebar has stopped working in Firefox 103 version.
It’s happening because Mozilla team has renamed the above mentioned values. The -moz-accent-color
value has been replaced by AccentColor
and -moz-accent-color-foreground
has been replaced by AccentColorText
.
New Updated Code to Enable Colorized Titlebar in Firefox 103 Version
So if you want to restore or enable colorized titlebar again in Firefox 103 or later version, you’ll need to use following updated code in userChrome.css file:
.titlebar-color{
color: AccentColorText;
background-color: AccentColor;
}
Once you apply above mentioned code, it’ll enable colored or colorized titlebar again 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: Following is the full code to restore classic UI and colorized titlebar for Firefox 103 and later versions:
.titlebar-color{
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;
}
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 a lot.
Thanks for this new code. I was using this code after the 103 update messed things up.
.titlebar-color{
color: #ffffff;
background-color: #0078D7;
}
Now I will start using yours but am going to save this one, knowing Mozilla and their shenanigans. Thanks.
Your code gives with me a blue title bar on all the opened windows. I used the code below to have only the active window a blue title bar (besides other things that may be not necessary anymore?). Of course since the 103 update they are all gray. What do I have to change to have only the active window coloured?
/* Dynamic window (tool / menu) bar */
#toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
color: ThreeDShadow !important;
}
@media (-moz-windows-accent-color-in-titlebar: 0) {
:root[sizemode=normal][tabsintitlebar] {
border-top: 1px solid rgba(0,0,0,.7) !important;
}
:root[sizemode=normal][tabsintitlebar][always-use-accent-color-for-window-border]:not(:-moz-window-inactive) {
border-top-color: -moz-accent-color !important;
}
:root[tabsintitlebar]:not(:-moz-lwtheme) {
background-color: hsl(235,33%,19%) !important;
color: hsl(240,9%,98%) !important;
}
}
@media (-moz-windows-accent-color-in-titlebar) {
:root[sizemode=normal][tabsintitlebar] {
border-top: 1px solid -moz-accent-color !important;
}
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
:root[tabsintitlebar]:not(:-moz-window-inactive)[lwt-default-theme-in-dark-mode] {
background-color: -moz-accent-color !important;
color: -moz-accent-color-foreground !important;
}
:root[tabsintitlebar][lwt-default-theme-in-dark-mode] #titlebar {
--toolbarbutton-icon-fill: currentColor !important;
--toolbarbutton-icon-fill-opacity: .7 !important;
}
}
.toolbarbutton-animatable-box,
.toolbarbutton-1 {
fill: currentcolor !important;
}
#scrollbutton-up,
#scrollbutton-down {
fill: currentcolor !important;
}
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
min-height: 0px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}
^^ As mentioned in the article, you can try to replace -moz-accent-color value with AccentColor and -moz-accent-color-foreground value with AccentColorText in your custom code.
Before I posted my question I replaced -moz-accent-color with AccentColor to no avail. AccentColorText is nowhere in my code (I didn’t write myself).
^^ Your custom code contains too much styling which might cause issues. I’ll advise you to use the code given in the main article.
Forget all I said before. I forgot to replace color: -moz-accent-color-foreground !important; with color: AccentColorText !important; in my code. Now all is working fine again. So you may delete my previous comments. I do however use a different code now combined with an old pre 92 styling code which is more compact. Thank you fore your patience with me.
@Zwoeger please share your userChrome.css, thanks.
To have only the active window display a color title bar just add
:not(:-moz-window-inactive)
after.titlebar-color
in your userChrome.css example like so:.titlebar-color:not(:-moz-window-inactive) {
color: AccentColorText;
background-color: AccentColor;
}
Nothing else needs changing. This works for me in Firefox version 103.0.2.
^^ Featured here:
https://www.askvg.com/tip-enable-blue-titlebar-on-active-window-only-in-firefox-keep-inactive-titlebars-grey/
Hi,
I used your code exactly in my userChrome.css and Firefox refuses to put any color in the title bar.
Firefox – latest build, 105.0.3 (64-bit), Windows 10 Pro, Theme = System Theme
Win 10 Pro Color settings (I also have a background slideshow running):
Choose your color = Custom
Default Windows mode = Dark
Default app mode = Light
Transparency Effects = On
Accent Color = Default Blue
Show accent color =
– Start, taskbar and action center – checked
– Title bars and window borders – checked
Any suggestions? Thank you for your help!
^^ Does your CSS file contain any other code?
Hi, .css file has no other code. I copied the code block from “NOTE: Following is the full code to restore classic UI and colorized titlebar for Firefox 103 and later versions:” to Notepad and saved as userChrome.css, which is in a folder called “chrome” in my Firefox profile folder. Thanks.
Hi VG, this is solved and Firefox now has colored title bars! After more looking, about:config, toolkit.legacyUserProfileCustomizations.stylesheets in Firefox has to be set to true.
Thanks for your help!
hi, i would like to use AccentColor variable in userContent.css to change the background of one of the extensions…
It worked with -moz-accent-color, and does not work now:( so maybe someone knows how to get AccentColor from userChrome.css in userContent.css?
.titlebar-color{
color: AccentColorText;
background-color: AccentColor;
}
does nothing. Where do I place the desired color codes or define AccentColorText?
^^ Make sure you have enabled CSS Stylesheet code support in Firefox using STEP 1:
https://www.askvg.com/tip-new-working-method-to-restore-classic-theme-and-ui-in-firefox-91-and-later-versions/