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

https://github.com/piroor/treestyletab/blob/5a8569c22feeaedeecde623a86832db7bc0419a2/webextensions/sidebar/styles/photon/photon.css#L49-L76

[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:

[piroor]

Hmm... it is very odd. Firefox looks to respect GTK+ theme color on its chrome (UI of Firefox itself) but does not apply for CSS system colors in content processes including for extensions...

[jayywolff]

Yippy, adding export GTK_THEME="Arc-Dark" to ~/.profile and restarting resolves this issue completely. Thank you @piroor

might be helpful for others to mention this in the faq "How to apply GTK+ theme color on Linux?"

[piroor]

@jayywolff Thanks, I added the description to the FAQ topic.

[lapo-luchini]

This is on Windows: half the default themes respect dark, half don't: PS: I'd love the "×" to be activated on hover also in themes other than "Sidecar", would it be possible to control it from a separated option?

[irvinm]

@lapo-luchini check the wiki ... there is CSS to hide the "x" unless on hover.

[lapo-luchini]

@lapo-luchini check the wiki ... there is CSS to hide the "x" unless on hover.

Here, nice, thanks!

[irvinm]

@piroor can this be closed?

[piroor]

@jayywolff Could you try Firefox 96.0 + TST 3.8.19 without workarounds on Arch? If they work as expected with no workaround, I think this issue can be closed.

[jayywolff]

@piroor

My current setup: Firefox 96.0 TST 3.8.19 with Photon theme Arch Linux (running i3wm) Arc-Dark GTK theme

Still works well with the css workaround suggested a while ago.

In order to get my system dark theme working properly with TST I currently need to:

• add export GTK_THEME="Arc-Dark" in ~/.profile
• enable widget.content.allow-gtk-dark-theme in firefox about:config
• I run fairly minimal custom css, and the patch in the extra styles section of the TST perferences

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

Haven't had any issues with this setup for several firefox releases.

If I remove the css patch above, it'll use the default Photon theme. If that's set as dark, it'll be dark, but the only way I can use my system gtk dark theme is with that css workaround.

[ric2b]

Just to add a data point: I updated from Ubuntu 21.10 to 22.04, which migrated Firefox to the snap version and TST lost the "close tab" and "create tab" icons.

I added export GTK_THEME="Arc-Dark" to ~/.profile, as mentioned above, restarted Firefox and that fixed it.

[piroor]

@ric2b TST's icons are contained to TST's package itself and it won't refer GTK's icons. I think that the problem is due to Firefox's bug and you saw correct icons because of restarting of Firefox. Related issue: #3114

[github-actions[bot]]

This issue has been labeled as "stale" due to no response by the reporter within 1 year (and 7 days after last commented by someone). And it will be closed automatically 14 days later if not responded.

[github-actions[bot]]

This issue has been closed due to no response within 14 days after labeled as "stale", 7 days after last reopened, and 7 days after last commented.