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).

[mbostock]

This is inconsistent with how we’ve (currently) implemented Generators.dark; the two should definitely be consistent — and ideally using the same code.

It also feels a little overkill to me to use the probe transition technique in production when we only expect to need it (versus a media listener) because the stylesheets can change during development. Perhaps we could use a conditional NODE_ENV test inside of Generators.dark. I know I’ve also advised to minimize the differences between production and development, but if it’s entirely hidden within the Generators.dark implementation, that seems pretty safe. Or we could just always do the probe transition technique…

[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