Dark theme not working on firefox 90

[jayywolff]

Here we go again.

Firefox 90.0.1
Arch Linux 5.12.15
TST 3.8.7

Just updated firefox and my side tabs are now burning my eyes with the light theme. Still not sure what changed, digging around to see what happened.

[jayywolff]

This snippet to enable a dark gtk theme no longer works. When I remove it from my config, im able to use the stock photon theme in dark. I guess i may have to hardcode the colors as a workaround for now

treestyletab/webextensions/sidebar/styles/photon/photon.css

Lines 49 to 76 in 5a8569c

	: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;
	}

[szc126]

Also Arch + Firefox. I suspect that something has broken in Firefox itself. My custom CSS used system colors, which have apparently become light. I use widget.non-native-theme.enabled=false for native GTK widgets, and they have also become light. Strangely, the "System colors" FF theme is still dark.

[piroor]

@jayywolff @szc126 Could you attach screenshots describing what is expected and what is actual? I'm not well about Arch Linux environment. I've just setup an Arch Linux environment with XFCE4 but I'm afraid that everything is different from your environment including color scheme.

What I got (and expected) is:

[jayywolff]

@piroor You should use a dark gtk theme to test this.
I use arc-dark gtk theme
It's in the arch repo, so it's easy to install arc-gtk-theme

Here's an example of how it looked before Firefox 90. This was a screenshot i saved a few days ago, had to randomize the tabs since I had many open.

Here's how it looks now

My styling that's pasted into the extra styles textarea under Addon Manager -> treestyletab -> Preferences -> Advanced

:root {
  --tab-size: 36px;
}
.tab:not(.pinned) { 
  height: var(--tab-height) !important;
}
.tab:not(:hover) .closebox {
  display:none;
}

/*** 
 * Apply Dark GTK theme in Linux
 * https://github.com/piroor/treestyletab#appearance
 * https://github.com/piroor/treestyletab/blob/5a8569c22feeaedeecde623a86832db7bc0419a2/webextensions/sidebar/styles/photon/photon.css#L49-L76
 * 
 */
: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;
}

[happy-dude]

@jayywolff do you happen to have high contrast turned on in accessibility/display options through system settings?

If this is the case, it's a known/reported bug searchable on bugzilla.

[jayywolff]

@happy-dude I don't use high contrast

my gtk3 config looks like

[Settings]
gtk-theme-name=Arc-Dark
gtk-icon-theme-name=Papirus-Dark
gtk-font-name=Hack Nerd Font 13
gtk-cursor-theme-name=capitaine-cursors-light
gtk-cursor-theme-size=0
gtk-toolbar-style=GTK_TOOLBAR_BOTH
gtk-toolbar-icon-size=GTK_ICON_SIZE_SMALL_TOOLBAR
gtk-button-images=1
gtk-menu-images=1
gtk-enable-event-sounds=0
gtk-enable-input-feedback-sounds=0
gtk-xft-antialias=1
gtk-xft-hinting=1
gtk-xft-hintstyle=hintfull
gtk-xft-rgba=rgb

[happy-dude]

To further narrow it down if it's a Firefox issue or TST issue, does your Addons page also show up as all-white or does it retain the dark styling you expect?

[jayywolff]

@happy-dude its dark

Also this is how the treestyletab Photon theme looks when I remove that system color snippet from my treestyletab css config

[wsmwk]

I'm seeing something similar, but didn't happen to me until I updated (I think) to 91.0b4

I suspect that something has broken in Firefox itself.

That's my thought as well. I'm using TST normal sidebar theme, with Mac "light" theme. It's affected more than sidebar - Firefox is seriously messed up.

[wsmwk]

I haven't figured out which FF bug it might be. I'm not even sure my bug query is good https://mzl.la/3eJZK5v

[wsmwk]

Found my issue - Bug 1721312 - When using High-Contrast Theme (Mac display > increase contrast), Firefox doesn't show if checkboxes are checked or unchecked.

[szc126]

Firefox "System theme" + TST "no decoration" and no custom CSS.

[piroor]

https://askubuntu.com/questions/1210859/how-to-make-firefox-look-more-like-the-current-gtk-theme
You looks need to specify the environment variable GTK_THEME to apply GTK+ theme to CSS system color. I've tried it on an Arch Linux environment and here are screenshots:

Firefox started via firefox:

Firefox started via GTK_THEME=Arc-Dark firefox: