feature: dynamic prefers color scheme

[gordonwoodhull]

This is a case of "it was easier to fix this than to document it the way it is".

We can watch the media query prefers-color-scheme in exactly the same way we watch the visual toggle.

This does not introduce any new FOUC. However we still have a FOUC on some browsers when toggling dark mode dynamically #12309. This turns out to be a quarto preview issue.

I am hesitant to merge this, but it would make documenting respect-user-color-scheme much easier if we don't have to say it's only on page load and not dynamic.

First let's see if tests pass. I have added a bunch of them in this PR.

[cscheid]

I think this is good to merge!

[gordonwoodhull]

This has an annoying interaction with the visual toggle. Right now they both "win" in the sense that changing the OS setting always changes the appearance when respect-user-color-scheme is set, but the local storage setting from the toggle is still saved and takes precedence on reload.

It's like a 1-bit CRDT problem.

I see three ways to make them consistent:

1. the OS setting should have no effect when there is a local storage setting
2. option 1, but the local storage setting should get removed when it matches the OS setting
3. the local storage setting should get removed when the OS setting changes

1 is simplest, but you can't ever get out once you've clicked the toggle, without going into dev tools and deleting the local storage key.

I think 2 is my favorite but it's slightly complicated to implement and document.

3 is simple but kind of weird and hard to explain.

[cscheid]

Huh, yeah, this is all a bit weird. I wonder what other SSGs that have dark-light mode do in this case...

[gordonwoodhull]

According to The Complete Guide to the Dark Mode Toggle

If the user has set an OS-level preference for a color scheme and has not set a preference on our site during an earlier visit, then we should respect the OS-level preference and render the site accordingly in light or dark mode.

This is option 1 and the simplest. It's consistent with what currently happens on page load.

I think I'll do this, and we can consider if we want to be more respectful of the user's OS setting in the future.

[gordonwoodhull]

From a code review standpoint, this PR adds two more entries to window (in order to share functions between scripts to update the visual toggle after the page has loaded).

Is this okay?

[gordonwoodhull]

I'll go ahead merge this, and ask my code review question on Thursday.

Glad to go back and clean this up later.