Skip to content
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

"Apply Browser Theme" not applying dark colors #2314

Closed
mruhlin opened this issue Jun 14, 2019 · 19 comments
Closed

"Apply Browser Theme" not applying dark colors #2314

mruhlin opened this issue Jun 14, 2019 · 19 comments
Labels
Firefox-issue bug of Firefox itself has-workaround

Comments

@mruhlin
Copy link

mruhlin commented Jun 14, 2019

Short description

Firefox ships with light and dark themes by default, and a "default" theme that can switch between them based on the user's OS-level dark mode settings (for mac OS at least, I'm not sure what other OSes support this).

Setting Tree Style Tab to "apply browser theme" doesn't seem to inherit any theme settings from those default themes though. It works fine with third party themes, but should work with the built in ones too (especially since Firefox does a good job of toggling when the OS toggles)

Steps to reproduce

  1. Set mac OS for dark mode
  2. Start Firefox with clean profile.
  3. Install TST.
  4. Go to TST preferences
  5. Select "plain light" theme
  6. make sure "Apply Browser Theme" is checked

Expected result

tabs should have dark background and light text

Actual result

tabs have light background and dark text

Environment

  • Platform (OS): mac OS mojave 10.14.4
  • Version of Firefox: 67.0
  • Version (or revision) of Tree Style Tab: 3.1.1
@31j
Copy link

31j commented Jun 15, 2019

Issue is reproduceable on Windows 10 Pro, Firefox: 68 Beta 10, Tree Style Tab: 3.1.1, With the Vertigo theme, Tabs should have dark background and light text however tabs have light background with dark text instead.

Sorry that I don't have any information for even a "temp" fix, best of luck with the issue!

@sbr61
Copy link

sbr61 commented Jun 15, 2019

GUI customization that can be done by addons seems to be rather limited in Firefox. This is the reason why people created ShadowFox.

What it does:

  • It enables Firefox dark theme.
  • It creates files userChrome.css and userContent.css in a folder chrome within your Firefox profile. These files are filled with CSS customization that Firefox will pick up on its startup. This will extend the Firefox dark theme, e.g. about:preferences will be dark, too, and much more.
  • It has support for several addons. It analyzes which addons you have installed and copies CSS customization for those of your addons it supports to the CSS files mentioned above. When doing so, it will replace the addon IDs with the unique UUIDs on your system assigned to your addons so that the customization will be applied on Firefox startup.
  • If you want to add own CSS, specify it in files userChrome_customization.css and userContent_customization.css in a sub-folder ShadowFox_customization of the chrome folder in your profile. (You get the path of your profile folder when you enter about:support in the Firefox address bar.) ShadowFox will copy the contents of these files over to the end of the userChrome.css and userContent.css files. This means you don't have to re-apply your changes whenever you execute ShadowFox again in order to add support for a newly installed addon.

Fortunately, ShadowFox does have support for TST. For me, the tab tree is completely dark with light text.

Actually, the text on discarded tabs was not light enough for my eyes. I fixed this by adding the following CSS to userContent_customization.css:


/*! Alters the webextension Tree Style Tab */
@-moz-document url-prefix("moz-extension://treestyletab@piro.sakura.ne.jp/") {
  .tab.discarded {
    opacity: .70 !important
  }
  .tab.discarded .label {
    color: var(--in-content-page-color) !important
  }
}

After adding this, re-execute ShadowFox to get the CSS copied over to userContent.css with the correct replacement for the URL prefix.

@piroor piroor added the Firefox-issue bug of Firefox itself label Jun 17, 2019
@piroor
Copy link
Owner

piroor commented Jun 17, 2019

Firefox doesn't notify color information to addons, if it is inherited from the platform. You need to choose "Dark", "Light", or other third party theme. Otherwise, Firefox Color addon helps you to choose colors manually. TST can apply theme colors on these cases.

@TiZ-HugLife
Copy link

Now that Firefox 68 is out, this option is broken for anyone who updates to it. It seems like it might be related to OS theming being blocked on webpages, which I guess TST technically is at the end of the day. I noticed that parts of pages that used to be dark due to my GTK theme weren't dark anymore.

@FichteFoll
Copy link

FichteFoll commented Jul 11, 2019

I can confirm this. I was using this option with the Arc-Dark theme and after updating to 68 my TST is bright. I guess the workaround is to downgrade until this is fixed in upstream?

Edit: Well, guess that didn't work out too well because FF doesn't want to reuse a profile that has been used with a higher version once.

@TiZ-HugLife
Copy link

I went to /r/FirefoxCSS about this, and apparently there is a new about:config option: widget.content.allow-gtk-dark-theme Set that to true then restart.

@jayywolff
Copy link

I went to /r/FirefoxCSS about this, and apparently there is a new about:config option: widget.content.allow-gtk-dark-theme Set that to true then restart.

image

@mruhlin
Copy link
Author

mruhlin commented Jul 18, 2019

Hey thanks for the info. I just got back around to looking at this, and I don't see a widget.content.allow-gtk-dark-theme anywhere in about:config. (using firefox version 68.0, which they say is the latest. Did they give us a fix and then take it away?

edit: I guess GTK is a linux thing, so maybe that option just isn't a thing for mac users.

@irvinm
Copy link
Contributor

irvinm commented Nov 8, 2019

@mruhlin can you try again with the recent build?

@mruhlin
Copy link
Author

mruhlin commented Nov 12, 2019

Looks better! But.... on the latest build, it matches whichever theme the system has when firefox starts. If I toggle while firefox is running, FF automatically switches themes, but TST stays the same. Not sure if that counts as a separate issue or not.

  1. Set mac os to dark mode
  2. Launch Firefox
  3. Note that TST is dark
  4. Set mac OS to light mode
  5. TST should be light but is still dark.
  6. Close and reopen firefox
  7. TST is now light
  8. Switch OS back to dark mode
  9. TST still light

@irvinm
Copy link
Contributor

irvinm commented Nov 12, 2019

I just tried your exact sequence and in my case (Windows) the theme changes without having to restart Firefox. I will leave it to @piroor how he wants to handle that.

@mruhlin
Copy link
Author

mruhlin commented Nov 12, 2019

I've been clicking "remind me tomorrow" for a few months now about an osx update. Let me just double check if that changes anything...

@mruhlin
Copy link
Author

mruhlin commented Nov 12, 2019

Yeah no luck, works the same on latest mac os (10.15.1)

@irvinm
Copy link
Contributor

irvinm commented Nov 12, 2019

Thanks for trying. Glad it at least works after restarting Firefox.

@TiZ-HugLife
Copy link

There was a short time when it was broken on Linux, but the 4 days ago update fixed it.

@piroor
Copy link
Owner

piroor commented Nov 13, 2019

TST tries to mix some colors when the sidebar is loaded, to apply pale highlighted colors and other variations to hover/active tabs. Sorry that the latest released version of TST doesn't have any code to re-calculate colors when the system color scheme is changed dynamically and you need to close/reopen the sidebar to apply new colors completely for now.

Thus I've added a code to re-calculate colors dynamically at the commit 1832fb0. I hope it should fix the "some colors are remained with old color scheme" problem.

@irvinm
Copy link
Contributor

irvinm commented Nov 22, 2019

@mruhlin does this work better for you with the latest version? If so, can you close this item?

@irvinm
Copy link
Contributor

irvinm commented Feb 10, 2020

@piroor I am guessing we can close this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Firefox-issue bug of Firefox itself has-workaround
Projects
None yet
Development

No branches or pull requests

8 participants