Change color of inactive tabs?

[Wirpy]

Hello, would it be possible to somehow change the colour of inactive tabs?

They're a bit too dark for my own taste and I'd like the color to be the same hue of grey chrome has for it's inactive tabs.

Thank you.

[bmFtZQ]

Do you mean the background of the whole tab bar? If so then change --lwt-accent-color in colors.css.

The first colour is the light mode colour, and the second is the dark mode colour.

From:

:root:not(:-moz-lwtheme) {
  --lwt-accent-color: light-dark(#cecece, #1C1C1C) !important;
  ...
}

To:

:root:not(:-moz-lwtheme) {
  --lwt-accent-color: light-dark(lightblue, navyblue) !important;
  ...
}

[momoe]

Do you mean the background of the whole tab bar? If so then change --lwt-accent-color in colors.css.

The first colour is the light mode colour, and the second is the dark mode colour.

From:

:root:not(:-moz-lwtheme) {
  --lwt-accent-color: light-dark(#cecece, #1C1C1C) !important;
  ...
}

To:

:root:not(:-moz-lwtheme) {
  --lwt-accent-color: light-dark(lightblue, navyblue) !important;
  ...
}

First real quick TY for making this theme, Edge has a bit cleaner UI theme than FF now.

I wanted to ask particularly about this part of the CSS, and see if it's possible to have the tab background bar automatically match the system color theme like the original edge browser?

It's been my 2nd biggest gripe that the light theme has a constant gray background that washes out the tabs, breaking the system theme uniformity. Please let me know if there are any solutions instead of manually tweaking the CSS every time I change the system color theme.

[bmFtZQ]

I wanted to ask particularly about this part of the CSS, and see if it's possible to have the tab background bar automatically match the system color theme like the original edge browser?

It's been my 2nd biggest gripe that the light theme has a constant gray background that washes out the tabs, breaking the system theme uniformity. Please let me know if there are any solutions instead of manually tweaking the CSS every time I change the system color theme.

You can use AccentColor CSS system colour to get the system accent colour, AccentColorText will also give you the best text colour for that accent (white/black depending on the brightness):

:root:not(:-moz-lwtheme) {
  --lwt-accent-color: AccentColor !important;
  --lwt-text-color: AccentColorText !important;

  /* Remove inactive window background colour. */
  --lwt-accent-color-inactive: unset !important;
  /* Fade tab toolbar text when window is inactive. */
  --lwt-text-color-inactive: color-mix(in srgb, var(--lwt-text-color) 75%, transparent) !important;
}

Although if you use the 'Show accent colour on title bars and window borders' option in Windows you should use the CSS system colour: ActiveCaption (this is specifically the colour of window title bars, and the resulting colour will match other windows more closely):

:root:not(:-moz-lwtheme) {
  --lwt-accent-color: ActiveCaption !important;
  --lwt-text-color: CaptionText !important;
  --lwt-accent-color-inactive: InActiveCaption !important;
  --lwt-text-color-inactive: InActiveCaptionText !important;
}

[momoe]

Thank you that might be a viable option, though needing another plugin. I was also looking at this URL last night that showed disabling proton, and/or having the color marked as 'unset' might null out the background and use the windows color? https://superuser.com/questions/1655054/force-firefox-title-bar-to-use-windows-operating-system-theme-colors

[bmFtZQ]

Thank you that might be a viable option, though needing another plugin. I was also looking at this URL last night that showed disabling proton, and/or having the color marked as 'unset' might null out the background and use the windows color? https://superuser.com/questions/1655054/force-firefox-title-bar-to-use-windows-operating-system-theme-colors

That solution uses AccentColor as well. You can't disable Proton any more as that was only an option when Proton was first introduced. The unset part was just removing the accent colour when the window is inactive.

If you don't want to use the Edge-Frfox theme, then below would be the best solution. If you want the Edge-Frfox theme, then the above solution that uses ActiveCaption would be the best.

:root:not(:-moz-lwtheme) {
  --toolbox-non-lwt-bgcolor: ActiveCaption !important;
  --toolbox-non-lwt-textcolor: CaptionText !important;
  --toolbox-non-lwt-bgcolor-inactive: InActiveCaption !important;
  --toolbox-non-lwt-textcolor-inactive: InActiveCaptionText !important;

  /* Force button colours to match accent colour foreground. */
  & #titlebar {
    --toolbarbutton-icon-fill: var(--toolbox-non-lwt-textcolor) !important;

    &:-moz-window-inactive {
      --toolbarbutton-icon-fill: var(--toolbox-non-lwt-textcolor-inactive) !important;
    }
  }
}

[bmFtZQ]

Thank you that might be a viable option, though needing another plugin. I was also looking at this URL last night that showed disabling proton, and/or having the color marked as 'unset' might null out the background and use the windows color? https://superuser.com/questions/1655054/force-firefox-title-bar-to-use-windows-operating-system-theme-colors

I just found that Firefox already includes support for this when the preference browser.theme.windows.accent-color-in-tabs.enabled is set to true (if the Windows setting is also enabled).

The latest update to this theme also includes support for detecting this option, and applying the style only when needed (though the above preference should also be enabled).