Force Firefox Title Bar to use Windows operating system theme colors

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

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

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.