Add a dark and light mode toggle to the header

A sun and moon button at the end of the nav (and the Store's nav) swaps
the mode and remembers the choice in the browser. Until it is pressed the
site follows the device setting. A head script sets html[data-theme]
before first paint, so light styles now key off data-theme instead of a
media query, and motifs render both images with CSS showing one.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
This commit is contained in:
Claude
2026-10-18 19:57:05 +00:00
parent 7aa2910b12
commit 4614cd25a0
15 changed files with 200 additions and 106 deletions
@@ -222,11 +222,9 @@ const turnstileKey = turnstileSiteKey();
opacity: 0.9;
}
/* Glow is for the night sky; on Starlight the foil stands on its own. */
@media (prefers-color-scheme: light) {
.intro :global(.seal) {
opacity: 1;
filter: none;
}
:global(:root[data-theme="light"]) .intro :global(.seal) {
opacity: 1;
filter: none;
}
.eyebrow {
font-size: 11px;