Dark theme not working on firefox 90 #2969

jayywolff · 2021-07-18T03:16:05Z

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 · 2021-07-18T14:05:59Z

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 · 2021-07-19T00:26:41Z

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 · 2021-07-19T02:52:13Z

@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 · 2021-07-19T13:56:44Z

@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 · 2021-07-19T14:00:04Z

@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 · 2021-07-19T14:07:24Z

@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 · 2021-07-19T14:11:12Z

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 · 2021-07-19T14:41:05Z

@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 · 2021-07-22T15:32:58Z

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 · 2021-07-22T16:05:41Z

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 · 2021-07-22T16:40:11Z

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 · 2021-07-30T21:15:46Z

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

piroor · 2021-08-04T08:31:40Z

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 · 2021-08-04T08:45:51Z

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 · 2021-08-04T13:33:13Z

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 · 2021-08-04T14:24:44Z

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

lapo-luchini · 2021-10-26T07:22:18Z

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 · 2021-10-26T13:38:31Z

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

lapo-luchini · 2021-10-26T20:41:35Z

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

Here, nice, thanks!

irvinm · 2022-01-14T12:34:23Z

@piroor can this be closed?

piroor · 2022-01-14T15:31:09Z

@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 · 2022-01-14T16:57:25Z

@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 · 2022-04-27T23:47:27Z

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 · 2022-05-01T06:54:39Z

@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 · 2023-01-15T05:03:45Z

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 · 2023-01-30T05:05:35Z

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.

piroor added the help wanted label Jul 19, 2021

piroor added Firefox-issue bug of Firefox itself has-workaround and removed help wanted labels Aug 4, 2021

github-actions bot added the stale no reaction got for a long term label Aug 25, 2021

piroor removed the stale no reaction got for a long term label Aug 25, 2021

Repository owner deleted a comment from github-actions bot Aug 25, 2021

irvinm mentioned this issue Apr 28, 2022

Close and plus buttons dissapear after leaving alone for 1 hour LibreWolf 99-01 on LM 20.3, Cinnamon. #3114

Closed

github-actions bot added the stale no reaction got for a long term label Jan 15, 2023

github-actions bot closed this as completed Jan 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark theme not working on firefox 90 #2969

Dark theme not working on firefox 90 #2969

jayywolff commented Jul 18, 2021

jayywolff commented Jul 18, 2021

szc126 commented Jul 19, 2021

piroor commented Jul 19, 2021

jayywolff commented Jul 19, 2021

happy-dude commented Jul 19, 2021

jayywolff commented Jul 19, 2021 •

edited

Loading

happy-dude commented Jul 19, 2021

jayywolff commented Jul 19, 2021

wsmwk commented Jul 22, 2021

wsmwk commented Jul 22, 2021

wsmwk commented Jul 22, 2021 •

edited

Loading

szc126 commented Jul 30, 2021 •

edited

Loading

piroor commented Aug 4, 2021

piroor commented Aug 4, 2021

jayywolff commented Aug 4, 2021

piroor commented Aug 4, 2021

lapo-luchini commented Oct 26, 2021

irvinm commented Oct 26, 2021

lapo-luchini commented Oct 26, 2021

irvinm commented Jan 14, 2022

piroor commented Jan 14, 2022

jayywolff commented Jan 14, 2022 •

edited

Loading

ric2b commented Apr 27, 2022 •

edited

Loading

piroor commented May 1, 2022

github-actions bot commented Jan 15, 2023

github-actions bot commented Jan 30, 2023

Dark theme not working on firefox 90 #2969

Dark theme not working on firefox 90 #2969

Comments

jayywolff commented Jul 18, 2021

jayywolff commented Jul 18, 2021

szc126 commented Jul 19, 2021

piroor commented Jul 19, 2021

jayywolff commented Jul 19, 2021

happy-dude commented Jul 19, 2021

jayywolff commented Jul 19, 2021 • edited Loading

happy-dude commented Jul 19, 2021

jayywolff commented Jul 19, 2021

wsmwk commented Jul 22, 2021

wsmwk commented Jul 22, 2021

wsmwk commented Jul 22, 2021 • edited Loading

szc126 commented Jul 30, 2021 • edited Loading

piroor commented Aug 4, 2021

piroor commented Aug 4, 2021

jayywolff commented Aug 4, 2021

piroor commented Aug 4, 2021

lapo-luchini commented Oct 26, 2021

irvinm commented Oct 26, 2021

lapo-luchini commented Oct 26, 2021

irvinm commented Jan 14, 2022

piroor commented Jan 14, 2022

jayywolff commented Jan 14, 2022 • edited Loading

ric2b commented Apr 27, 2022 • edited Loading

piroor commented May 1, 2022

github-actions bot commented Jan 15, 2023

github-actions bot commented Jan 30, 2023

jayywolff commented Jul 19, 2021 •

edited

Loading

wsmwk commented Jul 22, 2021 •

edited

Loading

szc126 commented Jul 30, 2021 •

edited

Loading

jayywolff commented Jan 14, 2022 •

edited

Loading

ric2b commented Apr 27, 2022 •

edited

Loading