Add way to change color theme on the site

[ndd7xv]

With the addition of a dark mode for the website, the only way for readers to change theme would be to change their OS preferences.

It would be nice to be able to change the color theme directly on the site. Proposed ideas include a tri-state switch or button (maybe like the MDN docs?), but optimally it would be nice to have a setting for choosing dark, light, or the OS default.

See more discussion about this here.

[flying-sheep]

An implementation usually does these things:

1. Add a script that reads a previously set user preference. This script is put into the page <head/> and executed synchronously so there’s no flash of wrongly-styled content.
2. Add a tri-state UI element, as described in the linked comment.
3. Add a script that implements both an event listener reacting to a prefers-color-scheme change and hooks up the UI behavior. Complex UI like a tri-state toggle e.g. are made to cycle through things in a different order depending on prefers-color-scheme, in order to always make the first click do something, see here. It could also make sense to update the alt/title text so it names the action being performed.
4. Add CSS. I think the most elegant way is setting CSS variables depending on which color scheme is active. Alternatively, it’s possible to toggle <style/> tags.