Auto-Detect system dark mode?

TUSF

So it seems the website's dark mode is based on a "_reflexTheme" cookie, which isn't saved on a user's account.

I think that when someone first visits the site, it should use a media query to detect a person's system settings, and automatically use that to pick between light/dark mode.

In CSS this is done like so:

@media (prefers-color-scheme: light) {
  /* CSS for Light Mode here.*/
}
@media (prefers-color-scheme: dark) {
  /* CSS for Dark Mode here */
}

While in Javascript it's:

mql = window.matchMedia("(prefers-color-scheme: dark)")
console.log(mql.matches)
//"true" if system settings are dark mode.
//"false" otherwise.

Therefore, I think if someone visits the main site without this cookie, the site should check the user's preferred color scheme, and enable/disable dark mode based on that.

It's only after a person clicks on the dark mode toggle, that the cookie should override it.

Note: While most platforms (Windows, Mac, iOS & Android) have a fairly standard concept of a "Dark Mode" nowadays, and so most browsers easily read it, this isn't true for some OSes. Afaik, Chrome doesn't bother checking on Linux, because on Linux "Dark Mode" is dependent on the Window Manager, and due to the varying options of Window Managers that all store information differently, browsers just don't bother looking.