moinwiki
Automatic light/dark theme switching with `prefers-color-scheme` CSS media query
It would be nice if MoinMoin's default stylesheet / theming system would automatically offer a dark stylesheet at nighttime. GitHub itself does this, for example.
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.
MoinMoin could either 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), though maybe some users will want the ability to override the automatic behavior.
You can detect the system's state 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.
@omjamnekar, thanks for your support. I like the new dark theme.
Can you check the other themes? In the “Focus” theme e.g., the input fields are now black, but everything else seems unaffected by the changes. This is a problem with the use of variable names in the different designs. Some variables are used globally. Do you have any ideas for a naming concept that includes global variables and theme-dependent variables?
@omjamnekar are you still working on this issue?
The PR still needs some optimization, such as
- using the newly introduced variable names in the common.css file and
- fixing side effects on themes other than the default “topside” theme.
I might not be able to work on it
Thanks for supporting moin. I'll try to finish the feature.