This has been bothering me for a little while. The spacing is too big. Squish them
together and give it secondary text color so it doesn't compete with the title
or body text.
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.
