Automatic dark/light theme switching using the browser's prefers-color-scheme CSS mediaquery

[nekohayo]

I've been playing around with VirtualMin a little bit for fun, and noticed it has a manual light/dark theme switch toggle in its GUI.

This might not be really necessary anymore, it could be handled automatically by inheriting the OS's state from the browser. Recent versions of most operating systems and DEs (including GNOME / KDE / Elementary / MacOS / Windows / Android) can be set to switch between light/dark everyday at the user's preferred times, and modern web browsers follow suit, telling webpages' CSS mediaqueries that dark is now "preferred" or not.

You can detect this condition using this simple piece of CSS, such as:

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

I guess you could still have something in the UI if users really want to override the browser/OS, but I doubt people would want that in practice (otherwise why would they tell the OS and browser to switch to dark mode?) so you could probably rely on the automatic behavior by default.

[iliajie]

Hello,

Thanks for your nice suggestion. Infact we are using an automatic color scheme detection in our new webmin.com website.

However, I believe that we should keep the light scheme enabled by default in Virtualmin UI for variety of reasons. Although, we can implement an automatic scheme detection on the UI side.

[marclaporte]

This will be supported by upcoming Bootstrap 5.3:
https://getbootstrap.com/docs/5.3/migration/#color-modes

[nekohayo]

My 2¢: I tend to think that it is in the users' best interest to automatically use their system theme by default (rather than enforcing "light" mode), and offering them the option to force light (or dark) if they somehow don't want this to follow their system theme for some reason. GitHub itself is an example of that (it defaults to respecting the system theme for all visitors, and it has a UI allowing you to override/configure that in your user profile), and so do most apps/website that implement it, from what I've seen.

[iliajie]

We're not enforcing light mode. It's user based.

[iliajie]

Wait, we do. I was referring to webmin.com.

[nekohayo]

I should not have said "enforcing" as it is not the right word ("defaulting" is probably more appropriate), but I think you know what I mean :) i.e. my UX recommendation would be for the default to be "automatic" (and overrideable by the user if desired, yes). After all, the user has already voiced their preference through the operating system.