System theme mode support

[liamjohnston]

This PR looks at the user's system-wide theme setting. If the user has their setting as the new TGS theme option 'system', and their system-wide preference is dark, then it applies the dark styling to the suspended page and popup.

Note this is not currently working for some reason.... need to figure out why. I'm trying to do it with JS, but even a basic CSS detection is not working for me
@media (prefers-color-scheme: dark) {
* {color: red!important;} // nothing happens
}

[liamjohnston]

If possible we should make 'system' the default setting, unless a user has already set their TGS preference to 'dark'

[dreshfield]

@liamjohnston What browser are you using, out of curiosity? Your @media query may not be working because prefers-color-scheme is currently only supported in Firefox 67 and Safari 12.1.

[liamjohnston]

Chrome. I was under the impressing Chrome 73 supports it...

[dreshfield]

Chrome. I was under the impressing Chrome 73 supports it...

The Chrome 73 release notes do mention that work on supporting prefers-color-scheme is in progress, but it looks like the Chromium team's aiming to get it in for Chrome 75, so it may be a ways off yet.

[liamjohnston]

Ah, I read that page but only scanned it. Sure enough, the browser chrome (tab bar) respects the system theme but the media query support is not yet there. This code should work but we should wait till it can be properly tested. In the meantime we can work on getting decent translations for "use system setting" 😊

[quenz]

Chrome Dev and Canary are at version 75 now, I wonder if prefers-color-scheme is in these builds?

Just mentioning in case you would like to test your code.

[liamjohnston]

@quenz Hmm, gave it a go in Canary (v75) with no luck. Looking at caniuse, it seems still a ways off.
https://caniuse.com/#search=prefers-color-scheme

Firefox Nightly is the only browser I can find that supports it.... but given this is primarily a Chrome extension, that isn't much good to me.

[stale]

This issue has been automatically marked as stale because it has not had any new activity for 180 days. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[quenz]

@liamjohnston https://caniuse.com/#feat=prefers-color-scheme is now properly supported. At least one other extension is using it (Dark Reader). Does your code work now?

[justforuse]

Any process for this feature?

[achembarpu]

According to caniuse, and personal experience, it appears that all mainstream browsers support this as of Q4 2019. Would it be possible to merge this now? 😄

[thanegill]

@liamjohnston Can you unmark this as a draft?

@deanoemcke Is this something that can get reviewed?

[ChaitanyaPramod]

I tested this change on my Chrome instance and it works as intended.

However, there's a problem with the current implementation — tab suspended during "light" mode doesn't turn "dark" when the system preference is changed to "dark".

Instead, we'd have to something like adding the 'system-theme' class instead of 'dark' and in CSS and use media query (like in the first comment) to select appropriate colors and background colors

[VergeDX]

Currently, "light" mode suspended tabs will turn dark after switch to "dark" mode,
so we can continue to finish this PR! @ChaitanyaPramod @liamjohnston

[liamjohnston]

@VergeDX This extension has changed ownership, so I can no longer merge this in I'm afraid.

FYI @thegreatsuspender if you're out there - any appetite to add this functionality?