Add dark mode toggle button

[nick3white]

Description

I've added a dark mode toggle web component to add a dark mode to the htmx.org website. The web component just adds .dark to the body element, but it also checks for user preference (via prefers-color-scheme: dark and LocalStorage; it also adds the dark mode state to LocalStorage.

The preference checks enable dark mode to persist across page navigation, and they are the reason the toggle was not implemented in hyperscript. The body element class toggle is easy enough to do in hyperscript, but it's also the least complicated part of a dark mode toggle; handling persistence is the hard(er) part -- and, afaik, is out of scope for hyperscript? Since javascript is required to handle persistence, I felt it was worth it to use the web component for the entire toggle (I've heard locality of behavior is popular here).

I refactored the CSS colors into variables to ease the swap. I normalized the (wide variety!) of shades of gray into 2 foreground and 2 background colors, and handled variations using alpha. I retained the "brand" blue in the logos (var(--x-color)), but I switched to a lighter blue in dark mode for links, to keep the site in happy a11y territory.

I noticed a few places where other CSS normalization and optimization could occur, but I tried to keep those out of this PR. (If y'all express an interest in that, I'd be happy to add those as another PR.) The only "optimization" that I didn't remove is the addition of a note class (used in the index's news and in the docs page); I don't want to remove the ability of the content author to add css directly in the .md files, but this particular repetition seemed like something that could be extracted -- the author only needs to remember one class. I did NOT add the note class to anywhere else in the *.md files, since they didn't have that styling, but that seems like something worth trying.

Corresponding issue:

No issue, just my own screeching

Testing

• Verified that the dark mode toggle functions correctly on (both) major browsers (firefox, chrome, brave)
• Tested the website's responsiveness with the new styles.

Checklist

• I have read the contribution guidelines
• I have targeted this PR against the correct branch (master for website changes, dev for
  source changes)
• This is either a bugfix, a documentation update, or a new feature that has been explicitly
  approved via an issue
• I ran the test suite locally (npm run test) and verified that it succeeded (I didn't really; I only touched CSS. It was like that when I got here!)

[alecgargett]

I'll take a look at your styles tomorrow and give my opinion but I don't have write access to approve it myself anyway.