Suggested CSS to support option configuration when using "dark mode"

[irvinm]

There is a CSS tag to detect when using dark or light mode (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) which would allow better support of dark mode when configuring TST.

Currently when dark mode is enabled (Windows 10 -> Settings -> Personalization -> Colors -> Custom -> Choose your default app mode -> Dark), the TST configuration screen looks like:

When I add the CSS below to the TST options.html page dynamically in the broswer, I can get a better match with dark mode and it properly reverts back to the white version when in "light mode".

@media (prefers-color-scheme: dark) {
  html {
    --input-background: #474749;
    --link-color: var(--blue40);
    --link-color-hover: var(--blue50);
    --link-color-active: var(--blue60);

    color: white;
    background: black;
  }
  
  input,
  textarea,
  select {
    color: white;
    background: gray;
    border: solid 1px var(--grey50) !important;
  }
}

I am not even sure if I got all of the CSS tags that need to be covered (or which colors your would want to use) but seems like this can be done fairly easy using the "prefers-color-scheme" CSS media feature.

If you don't want to do it, please feel free to close this item. :)

[piroor]

I think this should be fixed by Firefox itself, like https://bugzilla.mozilla.org/show_bug.cgi?id=1544212

[piroor]

I've filed: 1593355 - Options page in about:addons is still shown with bright color on Dark mode
https://bugzilla.mozilla.org/show_bug.cgi?id=1593355

[irvinm]

Thanks @piroor! Let's see how this all plays out.

[jakobbbb]

Hey,

unfortunately, since TST 3.2.3, TST has stopped respecting the Apply Browser Theme option for me.

I use a dark GTK theme (I'm on Linux) and have set Firefox's theme to default so that it uses that GTK theme. I also set widget.content.allow-gtk-dark-theme to true, as suggested in #2314 (comment).

I got the Plain theme to work again by disabling the newly added CSS with the prefers-color-scheme selector:

treestyletab/webextensions/sidebar/styles/square/plain-color.css

Line 62 in 0cf4426

@media (prefers-color-scheme: dark) {

I'm sure there is a way to prevent this bit of CSS overriding the theme if Apply Browser Theme is active?

[Nitrooo]

unfortunately, since TST 3.2.3, TST has stopped respecting the Apply Browser Theme option for me.

Same problem here on 3.2.3.

[piroor]

Sorry for the regression. With the commit 0b8dc5e TST now respects the system color even if it is detected as the "Dark" color scheme. Screenshots:

TST 3.2.3 + HighContrastInverse: tabs are shown with the built-in Dark color sheme

TST development build + HighContrastInverse: tabs are shown with colors specified by the HighContrastInverse theme

[piroor]

TST 3.2.3+ HighContrastInverse + "OldWood" Firefox theme: tabs are shown with the built-in Dark color sheme

TST development build + HighContrastInverse + "OldWood" Firefox theme: tabs are shown with colors specified by the HighContrastInverse theme, respecting "OldWood" Firefox theme

[jakobbbb]

Thank you very much, the styling works as expected in the latest development version:

3.2.3+Plain on the left, Dev Version+Plain on the right

[irvinm]

@piroor I am closing this issue as everything looks good now.