dark/light body class

[Fil]

This adds a dark or light class on the body to reflect the color-scheme property set by css.

For the rationale: we can't access the color-scheme property through css; only the browser can do that. I don't know why it's like that, and find it irritating. This "fixes" it somehow, and allows to create styles such as:

.dark .warning { border: 1px solid red }

which are otherwise impossible to do.

This is also necessary to support dark mode properly with tailwind (#1762).

[Fil]

I've come to believe that the media listener is only one of the top-level mechanisms that allow the page to decide what mode it is in. Other mechanisms are: ignoring the preferred media (ok), enforcing the color mode via a toggle (not a best practice, but can be useful for developers), changing the mode based on an arbitrary computation (good for artists and fun).

In all these cases the styles should set a correct color-scheme property, so that the browser knows what to do when it displays native inputs… basically because otherwise, the site is broken.

This I think implies that the current node’s (computed) color-scheme is the correct value that must drive the decision when a component supports both modes. (In other words, our components should work like the native browser inputs.)

So, I need to modify Generators.dark, and see how to use it so that it also sets the class.

[Fil]

to wrap into #1762 if that's the best course of action