In addition to the color scheme changing based on the system setting, enable
setting the color scheme explicitly by adding a color-scheme="light | dark" attribute
on the <html> element.
Doing this was a bit tricky. I originally implemented the grayscale ramp by
reversing it when prefers-color-scheme: dark. This was convenient, but meant that
setting the color scheme explicitly didn't work.
Along the way I discovered the light-dark() CSS function. Deploy that as the preferred
style if the browser supports it. Otherwise, fall back on the prefers-color-scheme
media queries. This function only works if color-scheme: light dark is set on the
:root element.
Eryn Wells
8a00cc6de9