Suggested CSS to support option configuration when using "dark mode"
irvinm opened this issue ยท 9 comments
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. :)
I think this should be fixed by Firefox itself, like https://bugzilla.mozilla.org/show_bug.cgi?id=1544212
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
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:
I'm sure there is a way to prevent this bit of CSS overriding the theme if Apply Browser Theme is active?
unfortunately, since TST 3.2.3, TST has stopped respecting the Apply Browser Theme option for me.
Same problem here on 3.2.3.
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