/* ============================================================ THEME: light and dark The header switch sets data-theme on and remembers the choice. With no stored choice the visitor's system setting decides. The attribute is set by an inline script in before first paint, so a dark visitor never sees a white flash. Dark is the same two-colour text rule on Tailwind v4's zinc scale, the counterpart of the light palette (zinc-900 ink on white): paper zinc-950 · sink zinc-900 · rules zinc-800 / zinc-700 ink zinc-100 · ink-2 zinc-400 · blue-400 for text and UI ============================================================ */ :root[data-theme="dark"]{ color-scheme:dark; --paper:#09090b; --ground:#0e0e11; --sink:#18181b; --rule:#27272a; --rule-2:#3f3f46; --ink:#f4f4f5; --ink-2:#9f9fa9; /* fine print: between zinc-400 and zinc-500, since zinc-500 is 4.0:1 here; this is 4.9:1 */ --ink-3:#80808a; --muted:#9f9fa9; --faint:#9f9fa9; --marker:#52525c; /* blue-400: 7.9:1 on paper, so one strength does both jobs in dark */ --accent:#51a2ff; --accent-text:#51a2ff; /* case preview fields: four dark greys, as the light theme has four light */ --field-1:#111114; --field-2:#141417; --field-3:#121215; --field-4:#151518; /* inspector guides and selection */ --gd:rgba(159,159,169,.3); --gd-strong:rgba(159,159,169,.7); --sel-ink:var(--paper); /* dark text on the light blue: white on it fails */ --sel-soft:rgba(81,162,255,.4); /* the hero's two boxes: zinc-900 for both, so they pair */ --portrait-ground:#18181b; --role-ground:#18181b; /* a hovered project cell: halfway from zinc-900 (the tile grey, too faint here) to zinc-800 (the rule colour, too strong), so it reads without glaring (ink-2 6.2:1, blue 6.2:1 on it) */ --cell-hover:#202024; } @supports (color:oklch(0 0 0)){ :root[data-theme="dark"]{--accent:oklch(70.7% 0.165 254.624);--accent-text:oklch(70.7% 0.165 254.624);} } /* ---------- the switch ---------- A switch, not an icon button: the thumb's position is the state, so there is no "does the icon show what it is or what it does" question. The active mode's icon rides on the thumb. On a click the sun spins away and the moon rises (and the reverse); on load nothing animates. */ .theme-switch{ display:inline-grid;place-items:center;flex:none;align-self:center; height:44px;margin:-8px 0;padding:0 2px; background:none;border:0;cursor:pointer;color:var(--ink); } .ts-track{ position:relative;display:block;width:54px;height:30px;border-radius:999px; background:var(--sink);border:1px solid var(--rule); transition:background-color .3s ease,border-color var(--hover-t) ease; } .theme-switch:focus-visible{outline:none;} .theme-switch:focus-visible .ts-track{outline:2px solid var(--accent);outline-offset:3px;} .ts-thumb{ position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%; background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12); transition:transform .42s cubic-bezier(.34,1.45,.64,1),background-color .3s ease; } :root[data-theme="dark"] .ts-thumb{transform:translateX(24px);background:#27272a;box-shadow:0 1px 2px rgba(0,0,0,.5);} .ts-thumb svg{position:absolute;inset:4px;width:16px;height:16px;stroke-linecap:round;stroke-linejoin:round;} /* icons are in the secondary ink, and turn blue while the switch is hovered */ .ts-thumb svg{color:var(--ink-2);} /* secondary ink: full ink read too active */ @media (hover:hover){.theme-switch:hover .ts-thumb svg{color:var(--accent-text);}} .ts-sun{fill:currentColor;stroke:currentColor;stroke-width:1; transition:transform .5s cubic-bezier(.34,1.3,.64,1),opacity .25s ease,color var(--hover-t) ease;} .ts-sun .ts-rays{fill:none;stroke-width:2;stroke-dasharray:3;stroke-dashoffset:0;transition:stroke-dashoffset .4s ease .1s;} .ts-moon{fill:currentColor;stroke:currentColor;stroke-width:1; transform:rotate(-100deg) scale(.3);opacity:0; transition:transform .55s cubic-bezier(.34,1.3,.64,1),opacity .25s ease,color var(--hover-t) ease;} :root[data-theme="dark"] .ts-sun{transform:rotate(100deg) scale(.3);opacity:0;} :root[data-theme="dark"] .ts-sun .ts-rays{stroke-dashoffset:3;} :root[data-theme="dark"] .ts-moon{transform:none;opacity:1;} /* three stars come out in the track in dark, one after another */ .ts-star{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--ink-2); opacity:0;transform:scale(0);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.6,.64,1);} .ts-star.s1{left:9px;top:8px;} .ts-star.s2{left:15px;top:17px;width:1.5px;height:1.5px;} .ts-star.s3{left:6px;top:19px;width:1.5px;height:1.5px;} :root[data-theme="dark"] .ts-star{opacity:1;transform:none;} :root[data-theme="dark"] .ts-star.s1{transition-delay:.18s;} :root[data-theme="dark"] .ts-star.s2{transition-delay:.26s;} :root[data-theme="dark"] .ts-star.s3{transition-delay:.34s;} /* first paint: already in place, no motion */ :root:not(.theme-ready) .theme-switch *,:root:not(.theme-ready) .theme-switch *::before{transition:none !important;} @media (prefers-reduced-motion:reduce){ .theme-switch *{transition:none !important;} }