Better GTK theming on Proton when using "system theme" on Firefox

[sith-on-mars]

I'm using Firefox 89 on OpenSUSE Tumbleweed. TST version: 3.8.1.

I followed "How to apply GTK+ theme color on Linux?" on Readme. It seems the fix for GTK theming doesn't work so well with the Proton UI when using "system theme". Here is an example:

I think the unused tabs should not have "frames" and should blend in the background. This is the design principles of the Proton UI.

Interestingly, when I followed "How to apply colors customized via Firefox Color?" on Readme. Theming works better with Proton UI:

I was using dark theme of Firefox. As you can see, unused tabs blend in the background.

[piroor]

Thanks, I forgot to update the information for Proton and include rules to use system colors to the Proton theme.

Sadly, due to restrictions of CSS system colors we cannot know the color of the headerbar in GNOME3. So I use inverted menu color on LInux instead. https://github.com/piroor/treestyletab/blob/180b6fa502587a3528af7f2e4f4671aca58d244a/webextensions/sidebar/styles/proton/proton.css#L72-L113

[sith-on-mars]

Many thanks for the quick reply and fix. I’ll test it later today.

As for theming based on Firefox Color, I’m wondering does Proton and Photon use the same rules? The readme only mentions Photon, but the same rules seem work well enough on Proton, as you can see in the second screenshot.

[sith-on-mars]

I applied the new rules of GTK theming for Proton, and it doesn't look quite right. I'm using dark mode.

[piroor]

It depends on recent changes. If you use TST 3.8.1, please try the latest development build: https://github.com/piroor/treestyletab#development-builds

[sith-on-mars]

It depends on recent changes. If you use TST 3.8.1, please try the latest development build: https://github.com/piroor/treestyletab#development-builds

I'm now using TST 3.8.2 and I also tried the development build. I still get the same results for using Proton.

[piroor]

I've tried to reproduce the problem you described, but I couldn't get quite same result... Steps I did:

1. Install openSUSE Tumbleweed with KDE desktop.
2. Download Firefox 89 from official tar.bz2 and unpack it.
3. Start Firefox 89.
4. Right-click on Firefox's toolbar and choose "Dark" from the list of available themes.
5. Customize Firefox and TST with the description for GTK theme: https://github.com/piroor/treestyletab#appearance

Here is a screenshot I got. Is there any difference with actual steps you did?

[sith-on-mars]

I applied the new rules of GTK theming for Proton, and it doesn't look quite right. I'm using dark mode.

Sorry I was bit unclear. In my previous post I meant I used the global dark mode on my Tumbleweed, not on my Firefox. I actually used used "system theme" rather than "dark" in Firefox. So yes, my step 4 was bit different and GTK theming didn't work well when I used "system theme".

I'm also wondering does using the customisation for GTK theme intend to work with different Firefox customised themes other than "system theme"? To my knowledge, only "system theme" respects your GTK settings, and the customisation for GTK theme of TST is designed for "system theme".

Edited the title and the first comment for the better clarification.

[piroor]

OK, I've tried the combination of the "Breeze Dark" of KDE and the default theme of Firefox, and I've got bright background and dark tab like your screenshot. In short: it happens due to rules for a bright theme. Paste only basic style rules for both bright theme and dark theme to the user styles, then I successfully got a naturally colored sidebar:

[sith-on-mars]

Nice, thanks!

I kind of feels the background colour is bit too dark, almost black. I think the background should look brighter in your KDE and my Gnome environment. Now this is what it looks like:

This is the Photon theme does better with GTK theming and looks closer to the system GTK theme. As you can see, the background looks more dark-brownish:

[piroor]

Thanks, I didn't realized that colors of Firefox's "Dark" theme was changed for Proton. With the commit c162c02 you'll see more natural colors on the Dark mode.

[sith-on-mars]

Incidentally, I discovered that if you put --tabbar-bg: var(--browser-bg-darker, ThreeDShadow); after the line of --tab-dropmarker: var(--browser-fg, -moz-dialogtext);, the background of the Proton theme looks the same as the background of the Photon theme. I saw --tabbar-bg: var(--browser-bg-darker, ThreeDShadow); is in the Photon rules, but not in Proton rules and I just copied and pasted this line. I don't have any programming experience so feel free to correct me. Here is what is looks like:

And here is the rule:

  :root[color-scheme="system-color"] {
    --tab-text-regular: var(--browser-fg, -moz-dialogtext);
    --tab-text-inverted: var(--browser-bg-more-lighter, -moz-dialog);
    --tab-text-active: -moz-dialogtext;
    --tab-text-active-inverted: -moz-dialog;
    --tab-border: var(--browser-border, var(--browser-bg-more-darker, ThreeDShadow));
    --tab-surface-hover-color: var(--browser-bg-hover-for-header-image-proton, ThreeDHighlight);
    --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-selected-tab-bg, -moz-dialog));
    --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-selected-tab-bg, -moz-dialog));
    --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;
  }

[sith-on-mars]

Tried the latest development build. It looks like this with the rules for Proton

It seems to me that c162c02 changed the default background colour closer to Firefox "dark" theme, which is a nice thing to have and I appreciate your efforts. For those who (maybe most of the users) don't want to dig in the TST settings and change the TST theme in accordance with their GTK theme, it's certainly an improvement. But Firefox "Dark" theme doesn't follow GTK theme at all and only "System theme" follow the GTK theme. I think to improve GTK theming on the Proton UI, a change in the Proton rule is still needed.

[piroor]

After more trials I decided to refresh the Proton theme totally. After the commit 33d3ebe4bc56335567c7397c22cb8fff0d2e5b8c custom user style hack should be obsolete and you just need to change about:config options to apply GTK Dark colors. Could you try the latest development build?

[sith-on-mars]

The new commit made the Proton theme works even better than the GTK hack before. The TST background colour now exactly matches the background colour of the tab bar.

[sith-on-mars]

Many thinks for the improvements!