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

Automatic dark color scheme stylesheet theme using the prefers-color-scheme browser media query #321

Open
nekohayo opened this issue Mar 20, 2023 · 1 comment

Comments

@nekohayo
Copy link

nekohayo commented Mar 20, 2023

My operating system does the switch for me everyday at the correct times, and my web browser follows suit, telling webpages' CSS mediaqueries that dark is now "preferred" or not.

BW's web interface could automatically offer a dark stylesheet at nighttime using this trick, i.e. "automatic" light and dark themes "based on browser/OS setting", as the default behavior (rather than needing users to turn this on as a setting)? You can detect this condition using this simple piece of CSS, such as:

@media (prefers-color-scheme: dark) { blah blah }

This might be interesting not only for desktop computers, but also for people using the web interface on mobile devices; that way if they're reading messages/directions at night on the street or in a dimly lit location, they won't get blinded by the white screen. It also tends to consume less power on AMOLED displays.

@nekohayo
Copy link
Author

nekohayo commented Sep 8, 2023

I think the color palette (bright orange) will have to have a dark mode variant / adaptation for dark mode. See https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-dark-mode-color-palettes (and the many other guidelines there)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant