Feature (html): Enable light-dark color scheme using `prefers-color-scheme`

[broofa]

Working on the new UUID spec in the early morning, I find myself getting a bit blinded as I switch back and forth between the spec, github, and my terminal. See below.

It'd be nice if the HTML generated by this tool took advantage of prefers-color-scheme to present an appropriately light/dark theme to the user.

[pusateri]

For the internet drafts where HTML is generated from XML, it would be great if the template would include dark-mode. This would require a header that advertises the document supports both light and dark as well as some tweaking of the color and background-color CSS so that these colors don't override the colors in dark-mode. As an experiment, I added

:root {
    color-scheme: light dark;
}

And then commented out all of the color and background-color attributes and the draft did properly switch to dark mode. The problem is that in order the keep the current color selections in light mode, a subsequent list of colors will need to be selected for dark mode too.

[pusateri]

This looks like a good approach to follow: https://medium.com/gumgum-tech/light-vs-dark-mode-debate-prefers-color-scheme-will-answer-d079a5f106aa

:root {
        color-scheme: light dark;
    --background-color: #ffffff; /* white background */
}

@media (prefers-color-scheme: light) {
    :root {
            --background-color: #ffffff; /* white background */
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000000; /* black background */
    }
}