[Tip] Enable Colorized Titlebar Again in Firefox 103 and Later Versions

Comments

NOTE: Older comments have been removed to reduce database overhead.

1. Thanks a lot.

2. 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.

3. 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;
}

4. ^^ 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.

5. 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).

6. ^^ Your custom code contains too much styling which might cause issues. I’ll advise you to use the code given in the main article.

7. 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.

8. @Zwoeger please share your userChrome.css, thanks.

9. 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.

10. ^^ Featured here:

    https://www.askvg.com/tip-enable-blue-titlebar-on-active-window-only-in-firefox-keep-inactive-titlebars-grey/

11. 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!

12. ^^ Does your CSS file contain any other code?

13. 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.

14. 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!

15. 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?

16. .titlebar-color{
color: AccentColorText;
background-color: AccentColor;
}

    does nothing. Where do I place the desired color codes or define AccentColorText?

17. ^^ 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/