Add support for system level theme preference

[soulcramer]

Since the new version of iOS and Android add a System level dark theme preference.

It would be a easy small feature to do.

In my opinion we should add a "system default" option in the settings. Then in the typescript file where the theme is applied, just check if the setting is system default, if it is then add a listener to the prefers-color-scheme media value :

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

Availability: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#Browser_compatibility

You can inspire yourself from this post on web.dev https://web.dev/prefers-color-scheme

[akyoto]

Interesting. How would this work in combination with our supporter limitation for dark mode?

I'm guessing you're suggesting a 3rd field in the settings, "Same as system", which can only be set if you actually own the dark theme?

[soulcramer]

That's exactly what I was thinking about

[akyoto]

Gotcha, I think there are no problems with the suggestion then :+1: