I discussed this in T284327#7334686, so, good to see a task.

I think in future this could look like this:
https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Target_night_mode_using_standard_CSS_class_on_HTML_element_AND_media_query

No need for any changes to template styles.

Oops, this had a task already.

I don't think this is correct to dupe. The request is not for prefers-color-scheme here but instead a method to do color checking. As I specified in the linked comment, a class on body or html would also suffice, and as I have made a point of repeatedly at this point, is the only way to smoothly transition Things from light-only to dark or light modes.

In T353887#9508057, @Izno wrote:

As I specified in the linked comment, a class on body or html would also suffice

Possibly, but that would be a skin request, not a TemplateStyles request.

True. I don't know why Reedy added TemplateStyles to this task. :)

Probably because it was in the title and task description? Anyway, feel free to reword and reopen if you think a task asking for a top-level dark mode class would be useful.

if you think a task asking for a top-level dark mode class would be useful.

We are currently in the process of discussing this as part of introducing night mode to Vector and Minerva skins in web.
You should be able to do this:

@media (prefers-color-scheme: dark) {
    /* skin-night-mode-2 means respect the browser preference (automatic mode) */
    .pane {
      background-color: black;
      color: white;
    }
}

In Vector/Minerva we will add the following CSS rule which will ensure that any CSS in a media query is applied.

html.skin-night-mode-clientpref-1 {
	color-scheme: dark;
}

The existing gadget on English Wikipedia could also add the following to get the same effect:

.client-dark-mode {
   color-scheme: dark;
}

From a template perspective you shouldn't need to make use of a class on the HTML element unless I'm misunderstanding something?