[Bug] Weird colors (again) on 4.2.5

[scarf005]

Abstract

same as #3742 but the issue persists.

Steps to reproduce

1. Start Firefox with clean profile.
2. Install TST.
3. check that firefox is on light mode.

Expected result

TST looks like as advertised.

Actual result

background is black.

Environment

• Platform (OS): linux fedora 42
• Version of Firefox: developer edition 143.0b9 (64-bit)
• Version (or revision) of Tree Style Tab: 4.2.5

[JSGRD22]

I am also experiencing this bug on Fedora KDE in both firefox stable and the waterfox integration. Some notable details are:

• it only happens when the browser theme is set to system theme (auto), not when explicitly selecting the dark theme
• changing the theme in TST settings to photon instead of system theme (I forgot the exact phrasing) fixes it

[piroor]

This is because Firefox doesn't provide ability to know actual colors of its native tab bar.

TST calculates default colors for the sidebar background based on colors of native buttons referred via CSS system color names. Otherwise you'll see too unreadable colors. In some platform buttons are dark, in some platform buttons are blight. TST cannot forecast that on various environments: Windows, macOS, Linux distributions, so I use CSS system color names for safety. The default theme of the Fedora 42 looks to use dark colors for buttons, as resolved colors of CSS system color names, thus TST's sidebar also has dark colors.

As a workaround you can override colors with custom style sheet (TST options => Advanced). For example:

 #background,
tab-item:not(.active):not(.bundled-active):not(.highlighted) {
  --tabbar-bg: color-mix(in srgb, ButtonFace 99%, ButtonText);
  --tab-text-regular: ButtonText;
}

[SebastienGllmt]

I also ran into an issue on the latest Firefox where they seem to have changed the sidebar so Photon doesn't work anymore (it looks the same as Proton). Not sure if it's related to the same issue as you, but my fix was to

1. Switch to high-contrast mode
2. Add the following custom CSS

#tabbar {
  background: #1C1B22;
}

[scarf005]

status update: prev workarounds broke, update to following

#background,
tab-item-substance:not(.active):not(.bundled-active):not(.highlighted) {
  --browser-background: color-mix(in srgb, ButtonFace 99%, ButtonText);
  --tabbar-bg: color-mix(in srgb, ButtonFace 99%, ButtonText);
  --tab-text-regular: ButtonText;
}