Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rely on prefers-color-scheme w/o night mode set #1114

Merged
merged 1 commit into from
Dec 1, 2019

Conversation

maxnordlund
Copy link
Contributor

Currently when a user visits the page during the night (or rather when
prefers-color-scheme is dark), the page uses night mode.

This is great, but what's not so great is that it remembers this as a
user choice, and won't automactically change if the user visits the page
at a later time during the day (when prefers-color-scheme is light
or no-preference).

This makes it so that night mode is an explicit choice, which is still
remembered. But if the user turns off night mode it goes back to the
light colors, and if the user later visits the site during night time,
that will be picked up.

The reasoning here is that it's called night mode, which previously was
a opt-in, but the current code makes it set the preference on first
load, and never let's the user change that.

Currently when a user visits the page during the night (or rather when
`prefers-color-scheme` is `dark`), the page uses night mode.

This is great, but what's not so great is that it remembers this as a
user choice, and won't automactically change if the user visits the page
at a later time during the day (when `prefers-color-scheme` is `light`
or `no-preference`).

This makes it so that night mode is an explicit choice, which is still
remembered. But if the user turns off night mode it goes back to the
light colors, and if the user later visits the site during night time,
that will be picked up.

The reasoning here is that it's called night mode, which previously was
a opt-in, but the current code makes it set the preference on first
load, and never let's the user change that.
@maxnordlund
Copy link
Contributor Author

I didn't add this to the PR but one could also use https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList to listen for changes in the users color preference.

Another way would be to switch to a CSS only solution. Basically, if the user has no-preference use the JS value, otherwise assume the user wants all of their apps to comply with the global light/dark preference.

But that's a more invasive change I think (and I don't know less to well).

@josevalim josevalim merged commit bdc9063 into elixir-lang:master Dec 1, 2019
@josevalim
Copy link
Member

❤️ 💚 💙 💛 💜

@maxnordlund maxnordlund deleted the patch-1 branch December 1, 2019 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants