v96 changed "System Theme" to match Light Theme :/

[Franpa]

In Firefox 95.0.2 and previous releases you had the System Theme which was a mix of light theme and shades of gray, dark theme which was all dark colours and light theme which is all bright shades of white.

Firefox 96 changed the System Theme to perfectly match the Light Theme which is awful, now the Tab Bar and Menu bar backgrounds blend in with the rest of the UI instead of being a darker gray.

Here is a comparison image of how it used to look and how it looks now: https://i.imgur.com/stoG0Mf.png

[Franpa]

Well, I tried overriding the colour and while it works when I define a random colour like #111111 it doesn't work when I define the desired #e4e4ea colour.

#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
background-color: #e4e4ea !important;}

[morat]

Similar threads
http://forums.mozillazine.org/viewtopic ... &t=3084918
http://support.mozilla.org/questions/1363844

[Franpa]

Okay so changing layout.css.prefers-color-scheme.content-override in about:config to a value of 2 seems to be working, I don't know how to recolour the menu bar background though D: would I need to add a #MenuToolbar section to chrome.css? Or is it called something else?

Edit: it's #toolbar-menubar

[Franpa]

So, I've almost got it all back to how it was thanks to Morat and the other folk, but the blue bar above the active tab is missing (dunno if they simply got rid of that in Firefox 96) and inactive tabs are sharing the same colour as the tab bar...

/* Apply inactive tab dimming */
.tab-background:not([selected]) {
background-color: #cecece !important;}

That background-colour part is being ignored and the colour is getting set to #d0d0d0, making the inactive tabs blend in and appear flat/ugly: https://cdn.discordapp.com/attachments/ ... titled.png

[dickvl]

If you still have @media (-moz-proton) {} block in your userChrome.css then make sure to remove them.

If have this Proton code and it still works.

Code: Select all

 .tab-background[multiselected="true"],
 .tab-background[selected="true"] {
   border-top-color: var(--tabs-border-color) !important;
   border-top-style: solid !important;
   border-bottom-color: transparent !important;
 }

 .tab-background:not([selected=true]):not([multiselected=true]) {
   border: 1px solid rgba(0,0,0,.20) !important;
   border-top-color: transparent !important;
   border-bottom-color: transparent !important;
   background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
 }

/* context-line */
 .tab-context-line {
   -moz-box-ordinal-group: 2; /*top:1; bottom:2*/
   margin-inline: 10px !important;
 }

/* [USERCONTEXT] */
 .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  background-color: var(--identity-icon-color) !important;
  margin: 0 0 !important;
 }