Make Tree Style Tab theme and webpage theme different?

[rieje]

I am using GTK Adwaita-dark theme--it works nicely in TST and the rest of Firefox UI. However, it also causes webpages to use a dark mode if they have one--I guess Firefox sees theme is used and asks webpages whether they want to apply the their own theme.

However, I do not want webpages to also use dark mode. Not enough webpages support it and when a page is loading it is always done in pure white, so seeing full white background followed by a near complete dark webpage when navigating webpages hurts the eyes.

Setting layout.css.prefers-color-scheme.content-override to 1 to make webpages use the light (default?) theme also causes TST to use light theme. Is it possible for webpages to ignore the theme and/or for TST to respect the theme, i.e. TST use dark theme and webpages use light/default theme?

[irvinm]

Not sure if this helps, but there is some information from the main page around GTK and a referenced issue on the topic at the bottom. It might be something to check until others weigh in on what you are asking. (I am on Windows primarily so can't help directly)

How to apply GTK+ theme color on Linux?

Due to restrictions within Firefox, TST can not apply GTK+ theme color to its appearance by default. If you want TST's UI with colors to match other parts of Firefox, you need to configure your environemnt, Firefox and TST as:

Set and export an environment variable GTK_THEME in your .profile or somewhere like: export GTK_THEME=<Your theme name like Arc-Dark> (I don't know why but https://github.com/piroor/treestyletab/issues/2969.)
Firefox's about:config
    widget.content.allow-gtk-dark-theme=true (not default)
    widget.content.gtk-theme-override=unset (default)
TST's options (pattern 1, using "Proton" theme)
    "Appearance" => "Theme" => "Proton" (default)
    "Development" => "Color scheme" => "System Color" (default)
TST's options (pattern 1b, using "Photon" theme)
    "Appearance" => "Theme" => "Photon" (default)
    "Advanced" => "Extra style rules..." => [paste these lines](https://github.com/piroor/treestyletab/blob/5a8569c22feeaedeecde623a86832db7bc0419a2/webextensions/sidebar/styles/photon/photon.css#L49-L76) (not default)
    "Development" => "Color scheme" => "System Color" (default)
TST's options (pattern 2, using less extra style rules)
    "Appearance" => "Theme" => "High Contrast" (not default)
    "Advanced" => "Extra style rules..." => no active style rule (default)
    "Development" => "Color scheme" => "System Color" (default)

For more details, please see also #2667.