/* Colour schemes. The whole app is driven by the semantic tokens declared in variables.css, so a scheme is just a remap of those tokens under a selector — no component sheet needs to know a scheme exists. "day" is the default already in variables.css and needs nothing here. The near-black nav bar and the toast keep their own dark palette in every scheme (that chrome is intentionally constant), so they aren't touched here. */ /* Buttons paint white text on --color-primary. Making the text a token lets a scheme flip it when the primary is light — the default keeps today's white. */ :root { --color-on-primary: #ffffff; } /* --------------------------------------------------------------------------- */ /* Night: a dark remap of the neutrals. Primary stays a mid-grey so the white */ /* button text keeps its contrast. */ /* --------------------------------------------------------------------------- */ :root[data-theme='night'] { --color-bg: #17181c; --color-surface: #1f2126; --color-surface-alt: #26282e; --color-border: #33363d; --color-border-strong: #43464e; --color-text: #ececf1; --color-text-soft: #b4b6bd; --color-muted: #8a8d95; --color-primary: #52555d; --color-primary-dark: #62656e; --color-on-primary: #ffffff; --color-success: #4c9d76; --color-warning: #c69a4b; --color-danger: #d97070; --color-danger-bg: #2a1e1e; --color-danger-border: #4a2f2f; --chart-bar: #6b7078; --chart-track: #26282e; --chart-series-1: #5aa2f0; --chart-series-2: #33c795; --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 45%); --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 55%); --ring: 0 0 0 3px rgb(236 236 241 / 18%); } /* --------------------------------------------------------------------------- */ /* The day/night toggle. It draws itself entirely from currentColor, so the same */ /* control reads correctly on the dark nav bar and on the light welcome bar. */ /* --------------------------------------------------------------------------- */ .theme-toggle { position: relative; flex: none; box-sizing: border-box; width: 54px; height: 28px; padding: 0; border-radius: 999px; /* The reset gives buttons `font: inherit` but NOT `color: inherit`, so without this the icons would draw in the UA default (near-black) and vanish on the dark nav bar. Inheriting makes the sun light-grey on the dark bar (night) and dark on the light welcome bar — visible on either. */ color: inherit; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 15%, transparent); cursor: pointer; } /* Both icons stay fully visible: the white thumb slides over whichever scheme is active, so the icon that shows is always the one you'd switch TO — it must read clearly (in night mode that's the sun, sitting on the exposed left side). */ .theme-toggle__icon { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 14px; height: 14px; color: currentColor; pointer-events: none; } .theme-toggle__icon--sun { left: 6px; } .theme-toggle__icon--moon { right: 6px; } .theme-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); transition: transform var(--transition); } .theme-toggle[aria-checked='true'] .theme-toggle__thumb { transform: translateX(26px); }