search

kritzware / json.pizza

Online JSON formatter and prettifier
https://json.pizza
80 stars 15 forks source link

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

Open rijkvanzanten opened 4 years ago

rijkvanzanten commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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.