-
Notifications
You must be signed in to change notification settings - Fork 277
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark theme not working on firefox 90 #2969
Comments
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
|
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 |
@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. |
@piroor You should use a dark gtk theme to test this. 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. 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;
} |
@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. |
@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 |
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? |
@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 |
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 |
https://askubuntu.com/questions/1210859/how-to-make-firefox-look-more-like-the-current-gtk-theme |
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... |
Yippy, adding might be helpful for others to mention this in the faq "How to apply GTK+ theme color on Linux?" |
@jayywolff Thanks, I added the description to the FAQ topic. |
@lapo-luchini check the wiki ... there is CSS to hide the "x" unless on hover. |
Here, nice, thanks! |
@piroor can this be closed? |
@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. |
My current setup: 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:
: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. |
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 |
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. |
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. |
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.
The text was updated successfully, but these errors were encountered: