Most recent update forced Plain to Plain Dark, causing mismatch to system GTK theme

[TiZ-HugLife]

Short description

The colors for the Plain style used to inherit the browser theme, which allowed it to match the GTK theme on Linux by default. But for some reason, they are now identical to the Plain Dark theme, which forces some color choices. Many other styles have this behavior. High Contrast does not, but it also has a really wonky background color.

Expected result

Tree Style Tab blends in with the GTK theme by default and looks like a part of Firefox's UI.

Actual result

It sticks out like a sore thumb. It looks like this item in the release notes has something to do with it:
"Always apply the "Photon" color scheme on Linux environments."
Why was this done? It seems counter to your intent as stated in issue 2662.

Environment

• Platform (OS): Xubuntu 18.04
• Version of Firefox: 79.0
• Version (or revision) of Tree Style Tab: 3.5.15

[piroor]

Thanks, sorry I misdetected the actual colors finally applied to the UI... I've reverted the commit to drop system-color support d066fb0 so now TST should respect colors defined by GTK+. Could you try the development build?: https://github.com/piroor/treestyletab#development-builds

[TiZ-HugLife]

Development build fixes it! Thank you! :)

[piroor]

By the way, I removed the theme "Plain Dark" before I read this issue. TST applies similar colors when the media query to detect dark color scheme is active, but it become impossible to apply the dark colors only for the sidebar. (And there is alternative: https://github.com/piroor/treestyletab/wiki/Plain-Dark-theme-(patch-for-the-theme-%22Plain%22) )

[TiZ-HugLife]

Well, "Plain Dark" was just the best way for me to describe the issue. My GTK theme is Adapta-Nokto, so it's already dark, and I have my browser configured to display most pages dark. That might be part of why it looked like that.

[jayywolff]

I didn't comment earlier since this was fixed immediately in 3.5.16. But now it's broken again in 3.5.20 😑

Platform (OS): Arch Linux
GTK theme: Arc-Dark
Version of Firefox: 79.0
Version (or revision) of Tree Style Tab: 3.5.20

[jayywolff]

7c72282

"Don't apply system colors when the dark color scheme is activated by the OS itself"

I dont understand what was the point of this. Just becuase the OS uses a dark color scheme, we cant use the system colors? 😕

I could swear there used to be a flag for use system colors at some point in the past but dont see it anymore.
Why cant we just choose whether or not to use the system colors regardless of if we use a light or dark theme in the OS

[piroor]

I dont understand what was the point of this. Just becuase the OS uses a dark color scheme, we cant use the system colors? 😕

I also thought so, but actually the GTK+ theme color looks not affected to CSS system colors. On my testing environment (Ubuntu 20.04LTS) they are still bright colors even if I choose the Adwaita-dark theme. Here is a screenshot on the testing page http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html

Anyway there are too many factors about colors of TST. Something old workaround you did can produce unexpected coloring. Currently the basic settings I'm testing are:

• OS theme: any
• Firefox theme: Default
• TST configs:
  • theme: Mixed on Windows or Linux, Sidebar on macOS
  • color scheme: Photon on Windows or macOS, System Color on Linux
  • user style rules: blank

If you have any difference, please try this combination.

[jayywolff]

Firefox added a default setting of widget.content.allow-gtk-dark-theme: false a while back i remember that was quite annoying as I had to toggle it on all my machines and on every new install.

Everyone using a dark gtk theme on linux that wanted to continue using the dark theme with firefox had to toggle this to true.

Check your about:config in your ubuntu test environment. If you set widget.content.allow-gtk-dark-theme to true and ensure that you have widget.content.gtk-theme-override as null, then firefox will respect your system theme.

[TiZ-HugLife]

Yeah, I forgot about having to do that, but I remember it now that @jayywolff mentions it. It was a bummer to have this addon fixed and then suddenly not fixed, but I understand why @piroor was confused, because that sort of extra step you're really only gonna find if you're all-in on dark themes on your Linux setup.

[jayywolff]

Check your about:config. Set widget.content.allow-gtk-dark-theme to true and ensure that you have widget.content.gtk-theme-override as null, then firefox should respect your system theme.

@piroor ☝️ It might be worth mentioning this in the wiki or readme (however you wanna word it) for linux users that want to use a dark gtk system theme with TST.

[piroor]

Thank you for re-mentioning about widget.content.allow-gtk-dark-theme, I completely forgot it despite it was mentioned sometimes (#2314 #2373 #2405).

actually the GTK+ theme color looks not affected to CSS system colors.

That was produced with the default preference widget.content.allow-gtk-dark-theme=false, and after I turn to false, both the testcase http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html and TST's "High Contrast" theme are rendered with dark colors for me. This means that Firefox treats content provided by an extension as a kind of regular Web content.

So, if you really want to use colors defined in the GTK+ theme instead of TST's built-in dark colors (it quotes colors from Firefox's in-content dark theme), you need to use the combination:

• Firefox's about:config
  • widget.content.allow-gtk-dark-theme = true (not default)
  • widget.content.gtk-theme-override = unset (default)
• TST's options
  • "Appearance" => "Theme" => "High Contrast" (not default)
    • "High Contrast" theme is designed only with CSS system colors, because it aims to be used with "high contrast" OS theme for low visibility people - it should respect highly readable colors instead of elegant-but-unreadable colors.
  • "Advanced" => "Extra style rules..." => no active style rule (default)
  • "Development" => "Color scheme" => "System Color" (default)

TST "Mixed" on GTK+ "Adapta-Nokto" (current default configs): not natural, unmatched colors. TST sidebar and the about:config pages have same colors because TST's built-in dark colors are copied from Firefox's in-content dark color definitions.

TST "High Contrast" on GTK+ "Adapta-Nokto" with widget.content.allow-gtk-dark-theme=true: natural, matched colors.

[piroor]

I've added a new FAQ topic: https://github.com/piroor/treestyletab#appearance

[jayywolff]

@piroor

Great so can you revert 7c72282

I know the high contrast theme works with dark gtk themes, but I dont want to use the high-contrast theme it looks like crap, would like to continue using the plain theme

[TiZ-HugLife]

Yeah, I'm not a fan of the high-contrast theme either. Please just revert that commit.

[piroor]

I think the commit can't be reverted, because the old behavior forces people to change widget.content.allow-gtk-dark-theme to true if they want to use any dark color theme. Otherwise, choosing the "Photon" color scheme is required. (Please remind that the "Plain Dark" theme was removed.)

[jayywolff]

I think the commit can't be reverted, because the old behavior forces people to change widget.content.allow-gtk-dark-theme to true if they want to use any dark color theme.

Correct, this is how its been ever since firefox 68 introduced this setting widget.content.allow-gtk-dark-theme.
It sucks that it doesn't work out-of-the-box anymore, I agree for sure. Its been over a year since then and we've been able to toggle the setting and continue along happily using TST (until 3.5.20 😢). The idea was that you could just note that in the README if you want to use system colors with a dark gtk theme go update that setting in about:config for new users that are unaware.

In that commit 7c72282 you override the plain style, the mixed style, and the vertigo style to ignore the system colors if the user has a dark gtk theme. The only reason why high-contrast still works with dark gtk themes is because you didnt override the css with the @media not (prefers-color-scheme: dark) media queries in that commit. Why is the high-contrast theme so special that it doesn't get this override but all the other nicer themes do? You allow that theme to work with system colors in dark gtk themes, why not the others? That commit didnt fix anything, all it did is introduce a breaking change in the system color scheme in TST for everyone using dark gtk themes that knew how to configure firefox to use your system theme.

Its a limitation of firefox, unless you can override it somehow via the webextensions API there's not much we can do to get around it.
That commit introduces a breaking change for anyone using a dark gtk theme.

You could always bring back the plain dark theme (not sure why it was removed 🤷‍♂️) for people that want to use that or tell them to use the Photon color scheme. But most users with a dark gtk theme would want to use their system theme with the plain theme as it looks the best. Everyone that uses dark themes in any app or OS understands that you 9/10 times have to go and find a setting to enable the dark theme so its really not a big deal as long as its documented well

[piroor]

If you want to use "Plain" theme with GTK+ theme color, here is a workaround: please put these lines to the user style rules.

treestyletab/webextensions/sidebar/styles/square/plain.css

Lines 47 to 74 in 0859730

	:root[color-scheme="system-color"] {
	--tab-surface-regular: var(--browser-bg-for-header-image, var(--browser-bg-base, -moz-dialog));
	--tab-text-regular: var(--browser-fg, -moz-dialogtext);
	--tab-text-inverted: var(--browser-bg-more-lighter, -moz-dialog);
	--tab-text-active: var(--tab-text-regular);
	--tab-text-active-inverted: Highlight;
	--tab-border: var(--browser-border, var(--browser-bg-more-darker, ThreeDShadow));
	--tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, ThreeDHighlight));
	--tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, Highlight));
	--tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, Highlight));
	--tab-dropmarker: var(--browser-fg, -moz-dialogtext);
	--tabbar-bg: var(--browser-bg-darker, ThreeDShadow);
	}
	:root[color-scheme="system-color"] #background::after {
	background: var(--browser-bg-darker, AppWorkspace);
	opacity: 0.15;
	bottom: 0;
	content: "";
	left: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 20;
	}

I think there are some patterns of Linux users:

1. Not familiar to both Firefox and the OS. They may use the environment with no customization.
2. Familiar to the OS but not to Firefox. If they uses an Ubuntu desktop environment, they may simply go to the options dialog of the OS and switch the theme to Light or Dark.
3. Familiar to Firefox but not to the OS. They may install Firefox's theme.
4. Familiar to both Firefox and the OS. They may install arbitrary GTK+ theme and activates the secret option widget.content.allow-gtk-dark-theme.

And we need to pay attention that default settings for cases 2 and 4 are sadly exclusive.

• When I initially created TST2, I used an old Ubuntu desktop and it has no option to switch the theme to the dark mode, and I had to install extra packages to configure GTK+ theme. So it was reasonable for me to configure TST for the case 4 by default.
• Recently I've tried new Ubuntu desktop environment and realized that there is an option to switch the desktop theme from Light to Dark without installation of any extra package. When the user changes the option, it is the case 2.

Of course there are many Linux distributions and Ubuntu is just one of them, and there are many power users matching to the case 4. But I think that the number of people who newly use Linux with the most major distribution will grow. I think the speed of growing is faster than the growing of the number of about case 4 people. (Yes, there is no evidence, this is just my personal biased view.) This is the reason why I chose to configure TST for the case 2 instead of the case 4.

I believe that the case 4 experts will find out this workaround information smartly.

[jayywolff]

I appreciate your thoughtfulness on this issue, and thanks for including a workaround to bring back the plain theme with system colors. Still at the end of the day though, agree to disagree. Breaking changes are not cool 😞

I also don't have stats to back it up but my thoughts would be that at least 80% of users using a flavor of Linux, a dark gtk theme, firefox, and TST is indeed a power user themselves or their desktop was configured by a power user. It seems extremely unlikely non power user would be running Linux, Firefox (most people use chrome), a dark GTK theme (which is not default in any popular user-friendly distro), and on top of that customizes their web browser experience with addons (other than maybe sometimes an adblocker).

To be fair though, I had already assumed us power users lost this battle and went ahead and added custom styles to mimic the plain theme hardcoding some of my gtk theme system colors, but your solution is much simpler 👍 so I'll swap it out with that. If you're going to keep it this way moving forward, could you add that in the FAQ you added regarding this issue or in the wiki somewhere.

[piroor]

I've updated the FAQ for Linux users: https://github.com/piroor/treestyletab#appearance I hope it helps more people.

[irvinm]

@piroor is there anything more to do with this issue?

[piroor]

Because of the decisiton at #2667 (comment) I'll do no more about this request for now. I close this.