Set default theme based on prefers-color-scheme media query

[rijkvanzanten]

It would be pretty neat if the app would default its color scheme based on the color scheme of the OS of the user.

[kritzware]

Hi @rijkvanzanten, apologies for the delay on this one also.

This is an interesting idea. We'll have to find out if the system colour scheme if available across various browsers.

[rijkvanzanten]

@media (prefers-color-scheme: dark) { ... } is the "official" way of signaling whether or not the user has requested the system to display in Dark mode (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). All the major browsers either support it, or will support it in the next release (Edge) (https://caniuse.com/#search=prefers-color-scheme).

Seeing we mostly rely on the text editor plugin to provide the styles, we'd have to read out this media query from JS, which is possible by using

const hasDarkModeEnabled = window.matchMedia('"prefers-color-scheme: dark)");

(see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)

[rijkvanzanten]

An interesting edge case is what happens when someone changes from light to dark mode while having the app open? The media query will automatically change, but the editor has to be re-initialized.

While this sounds like a big edge case, macOS can toggle between light and dark on sunset / sunrise. If you combine that with keeping a lot of tabs open, you can end up in a situation where the app UI changed, but the editor didn't.