Invidious: Support "prefers-color-scheme"

[PureTryOut]

Although not much supported (yet), this would switch Invidious to the dark theme automatically when the browser indicates a dark color scheme is preferred (e.g. on Linux when the user has a dark system theme).

In time this could probably remove the need for a toggle between light and dark mode entirely. For now I would have the setting have a 3rd option "auto" which is the light theme when "prefers-color-scheme" is not supported, or the preferred theme when it is supported. This option should probably be the default.

[omarroth]

Definitely looks interesting. I'll probably wait on adding this until there's an official spec, but if there's a PR for adding support before then I'd be happy to take a look.

[lionirdeadman]

These links may be useful for this (you can try this add-on in Firefox for testing too) :

• https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode
• https://paulmillr.com/posts/using-dark-mode-in-css/

[psvenk]

It doesn't seem like this constitutes an "official" specification, but the CSS Working Group's Media Queries Level 5 Editor's Draft contains prefers-color-scheme: https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme