-
Notifications
You must be signed in to change notification settings - Fork 114
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
Support for prefers-colour-scheme media query? #1
Comments
There is actually support for this via JavaScript: If you add that attribute to your DOM's body, the user's preferred color preference (if any) will be used to set the theme on the very first page load. Let me know if this solves your issue. |
In those lines a "darkModeOn" cookie is set even on load if one is not already set. Would not be better setting this cookie only on user interaction? In this way if someone changes their color preference, the old one, stored in the cookie, would not be used. In the way it's currently implemented the dark mode setting don't updates if someone changes the setting with the page already open. Some months ago I made an experiment on that: if a user changes browser/OS dark mode setting while the page is opened it will update automatically and it allows a per-website overwrite (demo). Sadly the way I implemented is not scalable - the CSS code needs to be duplicated to handle both media query based dark mode and per-website based dark mode - so I think it's not a good option for Halfmoon. I think it's better to just add a note in the docs explaining that the dark mode is set in the page load (so changing "emulate CSS media feature..." will not update the page automatically) and that it will respect the prefers-color-scheme media query until the user overwrites this preference by calling |
@qgustavor You may have the right idea. I will look more into this. |
This looks like a great alternative to Bootstrap. It'd be great to see the dark mode support work "automatically" via the prefers-color-scheme media query. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
The text was updated successfully, but these errors were encountered: