search

halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.04k stars 118 forks source link

Support for prefers-colour-scheme media query? #1

Open stephenreay opened 4 years ago

stephenreay commented 4 years ago

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

halfmoonui commented 4 years ago

There is actually support for this via JavaScript: Attribute that sets the color scheme via prefers-color-scheme

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.

qgustavor commented 4 years ago

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 halfmoon.toggleDarkMode() someway (like the button in the example from the documentation or the keyboard shortcut).

halfmoonui commented 4 years ago

@qgustavor You may have the right idea. I will look more into this.