Force Firefox Title Bar to use Windows operating system theme colors

Question

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:

Now, Firefox 89 title bars for the active window and inactive window are the same:

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):

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?

Answer 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,
#tabs-newtab-button,
#titlebar toolbarbutton:not(:hover):not(:active),
#scrollbutton-up:not(:hover):not(:active),
#scrollbutton-down:not(:hover):not(:active),
.titlebar-color {
    background: AccentColor !important;
    color: AccentColorText;
    fill: AccentColorText !important;
}

#TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive,
#tabs-newtab-button:-moz-window-inactive,
#titlebar toolbarbutton:not(:hover):not(:active):-moz-window-inactive,
#scrollbutton-up:not(:hover):not(:active):-moz-window-inactive,
#scrollbutton-down:not(:hover):not(:active):-moz-window-inactive,
.titlebar-color {
    background: unset !important;
    color: unset;
    fill: unset !important;
    transition: none !important;
}

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

Did a search in about:config for draw to check status of

browser.tabs.drawInTitlebar

saw gfx.draw-color-bars Looks like if you toggle true (default is false) it returns to following system color for active/inactive title bars