TST uses a different colour scheme then Firefox

[Peilonrayz]

Description

TST's plain style doesn't use the same colours as Firefox's tabs for regular surface, regular active and border. This made TST have white borders and blue surfaces when Firefox's UI is my selection of greys.

Fix

I have fixed these with the following CSS change:

:root {
  --tab-surface-regular: var(--theme-colors-tab);
  --tab-surface-active: var(--theme-colors-tab_selected);
  /* Firefox doesn't seem to have a active hover colour */
  /* --tab-surface-active-hover: var(--theme-colors-tab_selected); */
  --tab-border: var(--theme-colors-tab_background_separator);
}

You can test these are updated with the theme by using Firefox Color.

• --tab-surface-regular: Custom Colors > Background Color
• --tab-surface-active: Advanced Colors > Tab Selected
• --tab-surface-border: Advanced Colors > Tab Background Separator

Environment

• Platform (OS): Linux-5.9.11-arch2-1-x86_64-with-glibc2.32
• Widget Toolkit: GTK3 1:3.24.24-1
• Window Manager: Awesome 4.3-2
• Version of Firefox: 83.0
• Version of Tree Style Tab: 3.6.3

[piroor]

Is this covered by the FAQ topic "How to apply GTK+ theme color on Linux?" ? https://github.com/piroor/treestyletab#appearance

[Peilonrayz]

No. My theme is a Firefox theme made through Firefox Color; a tool from Mozilla to build Firefox themes. Whilst GTK is my main toolkit I am not using any of the colours from it in my theme.

The code above makes TST mimic Firefox themes. The following show where TST and Firefox themes diverge. Excluding "Overall" I have used red to highlight the difference.

• Overall

  broken

  

  fixed

  

• --tab-surface-regular: Custom Colors > Background Color

  broken

  

  fixed

  

• --tab-surface-active: Advanced Colors > Tab Selected

  broken

  

  fixed

  

• --tab-surface-border: Advanced Colors > Tab Background Separator

  broken

  

  fixed

  

[piroor]

Thank you for screenshots, I've gotten what you meant. In short this is by design of TST.

Due to my coloring policy TST's coloring is different from Firefox's theme coloring a little. TST applies Firefox's tab bar background color to the background of the sidebar, but TST also applies the Toolbar Color to background tabs, because the contrast is too high and too stressful for me between the toolbar color (light gray) and the background color (dark purple on Windows 10). Other colors ("border color for background tabs" and others) are also shifted to match this coloring policy. Thus you need to apply something custom user styles like as you currently use, if you hope to apply exact same colors between Firefox and TST.

Basically coloring of TST's sidebar is designed to be customized via the own user styles, not Firefox Color. Unfriendliness between TST and Firefox Color is an unexpected but unavoidable problem for now. A new built-in theme for better compatibility with Firefox Color will help people who have common demand like you, but I won't add it because I won't use it, sorry. Instead this is an effective workaround:

• Apply the user styles described at TST uses a different colour scheme then Firefox #2780 (comment)
• Choose "Photon" for the color scheme (under the "Development" section in the TST's options page)

[Peilonrayz]

Thank you for the response. Ok that is reasonable.

Should this be added to the FAQ, in a similar place to your first message? I'd be happy to submit a small PR if that is the case. Otherwise I'm happy for this to be closed since the work around is documented above.

[piroor]

OK, I've added a new FAQ topic to the "Apeparance" category and an updated CSS declaration to apply colors same to Firefox's native tab bar.

[piroor]

Please note that the suffix -30 for 30% opacity is introduced with the commit 22ed1e9.

[Peilonrayz]

Thank you very much. Your additional changes also affect another TST based extension making it have the correct background, which mine didn't. Thank you.