21

The latest Firefox version 89 update has lost respect for my theme choices on Windows 10 (20H2). Now title bars are all one color and I can no longer easily tell the difference between the active window and the inactive window.

Previously, the difference between active/inactive windows were easy to see: Previous Firefox showing correct title bar colors

Now, Firefox 89 title bars for the active window and inactive window are the same: Firefox 89 with wrong title bar colors

When I updated to Firefox 89, I picked the "System theme" which states: "Follow the operating system setting for buttons, menus, and windows." Unfortunately, it doesn't do that. I made sure that Windows has Settings> Personalization> Colors> "Title bars and window borders" is still checked. Other programs still behave appropriately.

I can put a regular title bar back on the window using the following:

about:config> "browser.tabs.drawInTitlebar = false"

This partially works and at least it follows the correct color scheme, but it leaves the tabs without colors. Since the setting that controls that describes drawing the tabs in the title bar it seems to me it should be following the title bar color scheme.

Turning off "proton" will apparently be disabled eventually, so making a userChrome.css as suggested in this answer seems like a decent partial workaround. Unfortunately, each window has its own active/inactive tabs.

Here's how that userChrome.css defined title bar appears(ignore the black text, title bar color is the issue): New Firefox userChrome.css title bars

As you can see, all tabs are colored the same, regardless of whether it's an active or inactive window.

So, how can I get Firefox to respect my operating system color choices?

2
  • 5
    Mozilla idiocy is why I stayed at v56, and then switched fully to Chromium a couple of years ago. I don't see going back.
    – RonJohn
    Jun 6 at 22:16
  • 4
    I do always enjoy the flood of questions on here every few months when Firefox routinely breaks their UI in some hilarious fashion. This isn't even close to their most egregious offense, but even this one was unnecessary at best and annoying at worst. Jun 7 at 3:51
7

I cannot tell the difference between the active and the inactive window.

They are tabs, not windows.


There are several way to change the colours.

  1. Disable proton.

    It can be disabled by setting browser.proton.enabled to false.

    Mozilla do have a habit of disabling such options so it may not be available in Firefox 90.

  2. You can modify userChrome.css to change these colours.

    Example:

    .tabbrowser-tab[selected] .tab-label {
      color: black !important;
      font-weight: bold !important;
    }
    
    .tabbrowser-tab[selected] .tab-content {
      background: #fcb731 ! important;
    }
    
    .tabbrowser-tab:not([selected]) .tab-content {
      background: #585060;
    

    Another example:

     /* Use color and shape to make the tabs look more like tabs */
     .tab-background {
       background: #585060;
       border-radius: 9px 9px 0 0 !important;
       margin-bottom: 0px !important;
       box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) !important;
       border: 1px solid rgba(0,0,0,.5) !important;
       border-bottom-width: 0px !important;
     }
    
     /* Selected tabs I want a bright background with a dark foreground */
       .tabbrowser-tab[selected] .tab-background {
       background: #fcb731 !important;
     }
     .tabbrowser-tab[selected] .tab-label {
       color: black !important;
       font-weight: bold !important;
     }
     /* Draw a solid line underneath to make the selected tab look  connected* to the rest of the browser */
     #TabsToolbar {
       border-bottom: 2px solid #fcb731 !important;
     }
    
     /* Hover over tabs */
     .tabbrowser-tab:hover .tab-background:not([selected]) {
       background: #686070 !important;
     }
    
  3. Install the Firefox Color extension:

    Build, save and share beautiful Firefox themes.

    Go to Advanced Colors / Tab Selected setting.

Source: Amit's Thoughts: Firefox 89 tab appearance

3
  • 1
    Someone will probably write a GreaseMonkey script if it does go away,
    – DavidPostill
    Jun 6 at 11:09
  • 7
    The examples are definitely windows, as they overlap. Yes, each contains multiple tabs, but that's not the issue being described in the question. Previously, a window's tab background would have a different color depending on whether the window was active or not. Now, the backgrounds of both windows are the exact same color. This is a problem not just when using multiple browser windows, but even when just using another program and Firefox at the same time. The top bar of a window (whether it's a titlebar or tab bar) has always been a different color, depending on which is active.
    – trlkly
    Jun 7 at 1:11
  • "They are tabs, not windows." I'm confused, should this answer work for windows also or are they for tabs only? sapanoia's answer definitely works for windows although it's ugly. Jun 24 at 7:07
6

Right click on any button of the toolbar and select Customize Toolbar... from the context menu. The customization page opens. In the bottom left-hand corner, tick the checkbox Title bar.

This restores the behaviour of Firefox before version 89. If the checkbox is not ticked, Firefox tells your window manager to not add a title bar.

3
  • This is, unfortunately, the only solution I see. It makes you lose even more vertical space of course.
    – Daniel B
    Jun 19 at 19:23
  • 1
    A little space can be regained by reverting the new wasteful tab strip to its previous design. Just set "browser.proton.enabled" to "false" in "about:config".
    – sapanoia
    Jun 19 at 19:29
  • Checking that box is the same as setting browser.tabs.drawInTitlebar = false. I double checked it. So far it has been the best solution that is likely to stick around. Unfortunately, the option to disable "proton" is likely going away after the next couple of releases.
    – Booga Roo
    Jun 20 at 0:56
1

Disabling Proton is no longer possible as of Firefox 91; and as of Firefox 92, there is no longer a built-in option to use the Windows accent color.

You can use a Firefox theme to add set colors to certain elements, but if you actually want to restore the ability to use the system theme color, you have to use a userChrome.css file.

I wrote a file doing just that:

/* Show active colors on main menu bar */
#TabsToolbar,
#navigator-toolbox {
    background: -moz-accent-color !important;
    color: white;
}
#TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive {
    background: unset !important;
    color: unset;
}

Add that to your userChrome.css file, and you should have your colors back like they used to be. (At least until Mozilla breaks things again.)

2
  • Good to know about the other updates. The "Firefox Color" add-on only got me 80% of the way there, so I'll take a look at this when I have the chance.
    – Booga Roo
    Sep 11 at 0:30
  • 1
    Confirmed working in 92.0. Thank you so much. Make sure that you follow the instructions from userchrome.org, especially setting toolkit.legacyUserProfileCustomizations.stylesheets=true in about:config, and restart after every CSS change.
    – jevon
    Sep 12 at 1:32
0

As said sapanoia, right click on any button of the toolbar and select Customize Toolbar... from the context menu. The customization page opens.

That said, on the bottom of the screen, clic on the "Theme" dropdown button and select the "system Theme".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.