/* Spelly — dark mode for the blog and the help centre. * * The theme toggle in the shared nav sets data-theme="dark" on , and * until now the ONLY thing that responded was the nav itself: neither help.css * nor the blog's inline CSS had a single dark rule, so clicking the moon * changed the menu and left a bright white page under it. * * The values are the landing's own dark palette, so all three surfaces go dark * together and to the same colours. */ [data-theme="dark"] { color-scheme: dark; --bg: #161033; /* the blog and the landing call it --surface; help.css calls it --card */ --surface: #241a4d; --card: #241a4d; --surface-tint: #2b2058; --tint: #2b2058; --ink: #F4EEFF; --ink-soft: #CFC2F2; --muted: #9B8FCB; --outline: #0C0722; --shadow-card: 0 10px 0 -2px rgba(0,0,0,0.25), 0 16px 36px -10px rgba(0,0,0,0.5); /* help.css uses these two for its page gradient */ --sky-1: #3a2a73; --sky-2: #241a4d; --page-bg: radial-gradient(1000px 600px at 85% -10%, #3a2a73 0%, transparent 55%), radial-gradient(900px 500px at -10% 20%, #4a235e 0%, transparent 55%), linear-gradient(180deg,#1b1240 0%,#161033 45%,#0f0a26 100%); } /* THE BLOG needs nothing more: its body already paints var(--page-bg). HELP.CSS hard-codes its gradient — linear-gradient(180deg,#CDEBFF,var(--bg),#FDF7E4) — so two of the three stops stay light however many variables are overridden. The whole background is replaced rather than patched. */ [data-theme="dark"] body { background: var(--page-bg); background-attachment: fixed; color: var(--ink); } /* Anything painted pure white by a literal rather than a token. */ [data-theme="dark"] .card, [data-theme="dark"] .hc-foot { background: var(--surface); }