New MacOS and Safari support a system-wide "Dark Mode", and make this available through CSS media queries with the prefers-color-scheme media feature. This is likely to start being supported in other browsers before long, so it would be good to be able to support automatic switching between light/dark themes for people that like that.
Would it work if we just added the media queries around the body.theme-<>? If the media query doesn't work (for example unsupported browser) would it still apply the CSS inside that query?
A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.
Another option is to allow people to set 2 preferred themes and then switch between those if they have that setting enabled. That would also allow people to have customization between any themes, like Dracula as their "light" theme and Black as their "dark" one.
In my opinion, the simplest way of implementing this would be to have two theme preferences for each user; one for light, one for dark. (The dark theme preference should probably have the option to be unset, in which case the light theme applies.)
Implementation-wise, it would be relatively simple: in addition to the theme-{name} class on the body, add a dark-theme-{name} class for the alternate theme. Then have copies of the theme definitions for body.dark-theme-{name} that only apply when prefers-color-scheme is dark (either using @media queries or the <link> strategy). The alternate theme rules will take precedence when enabled, applying the selected dark theme instead of the selected light theme. (This relies on the dark theme overriding all variables set by the light theme, but I think that's the case with the current theme mixin setup.)
Given that strategy, the main parts required to implement this:
Add dark-theme-{name} classes/styles that only apply the theme if prefers-color-scheme: dark
Split the theme cookie and user theme configuration into two parts, for light and dark themes
Add support in the main page theme selector
This should probably stay as a single dropdown; should it only configure the current state's theme? (ie. if the user is in dark mode and changes the theme, it would only modify the dark mode theme in the cookie)
Add support in the settings page for changing each theme independently
The largest question is how to handle people's existing theme settings. You could assume that if there's only one theme currently set, it should apply to both dark and light mode, but that has the downside of (mostly) permanently disabling automatic theme switching for existing users, so some people might never realize it was added.