/* theme.css — the palette, and the only place a colour is chosen. * * Three states, not two. An explicit choice stamps data-theme on ; the * default "follow the device" setting stamps nothing, and only the media query * separates light from dark there. So: * * :root the complete DARK palette, and the un-stamped * default. Dark is what this site has always * been, so it stays the ground state. * @media (prefers-color-scheme: light) * :root:not([data-theme="dark"]) * a light device gets light -- unless the viewer * has explicitly asked for dark, which wins. * :root[data-theme="light"] and the toggle wins in the other direction too. * * Every colour below is defined in the bare :root first. A colour whose only * definition sits inside the media query or a [data-theme] block does not exist * in the un-stamped state, which is most visitors -- that is how a page ends up * painting one theme's text on the other theme's ground. * * Components must read these tokens and never name a colour of their own. */ :root{ --bg: #0b0f17; --surface: #111826; --surface-2: #1c2637; --sunk: #0d1420; --sunk-2: #0d1725; --ink: #e6edf3; --ink-strong: #fff; --muted: #8b949e; --muted-2: #6e7681; --faint: #5b6b80; --rule: #1f2a3a; --rule-2: #2b3f5c; --rule-3: #294066; --control: #21324a; --accent: #58a6ff; --accent-2: #8fc4ff; --accent-ink: #cfe4ff; --accent-edge: #2b5f8f; --accent-soft: #16283f; --primary: #1f6feb; --primary-edge: #388bfd; --primary-hot: #2b7ef5; --scrim: #000a; /* What a thing floating above the page casts. A token because a colour written into a stylesheet is a colour that does not follow the theme -- on a light background this needs to be far softer than on a dark one. */ --lift: 0 8px 24px #00000047; --good: #3fb950; --good-soft: #12331f; --good-edge: #1e4620; --bad: #f85149; --bad-2: #ff7b72; --bad-soft: #3d1418; --bad-edge: #5c2126; --warn: #d29922; --warn-2: #f0b429; --warn-soft: #3a2d10; --warn-edge: #7a5c1e; --warn-deep: #c47f14; /* The animated wordmark. A whole gradient in one token: the stops have to change together or the animation reads as a different mark. */ --wordmark: linear-gradient(to right, #ff2a5f, #ff7e40, #6200ff, #00e5ff, #ff2a5f); --wordmark-hover: linear-gradient(to right, #00ff87, #60efff, #0061ff, #00ff87); --wordmark-glow: rgba(0, 229, 255, .4); color-scheme: dark; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg: #ffffff; --surface: #f6f8fa; --surface-2: #ffffff; --sunk: #f6f8fa; --sunk-2: #eef2f6; --ink: #1f2328; --ink-strong: #ffffff; --muted: #656d76; --muted-2: #6e7781; --faint: #8c959f; --rule: #a8b4c1; --rule-2: #8593a4; --rule-3: #66768a; --control: #eaeef2; --accent: #0969da; --accent-2: #0550ae; --accent-ink: #0a3069; --accent-edge: #9ac7ff; --accent-soft: #ddf4ff; --primary: #0969da; --primary-edge: #0a5cc4; --primary-hot: #0757ba; --scrim: #1f232866; --lift: 0 8px 24px #1f23281f; --good: #1a7f37; --good-soft: #dafbe1; --good-edge: #aceebb; --bad: #d1242f; --bad-2: #a40e26; --bad-soft: #ffebe9; --bad-edge: #ffcecb; --warn: #9a6700; --warn-2: #7d4e00; --warn-soft: #fff8c5; --warn-edge: #eac54f; --warn-deep: #7d4e00; --wordmark: linear-gradient(to right, #d1004b, #c2410c, #4c1d95, #0369a1, #d1004b); --wordmark-hover: linear-gradient(to right, #047857, #0891b2, #1d4ed8, #047857); --wordmark-glow: rgba(3, 105, 161, .35); color-scheme: light; } } :root[data-theme="light"]{ --bg: #ffffff; --surface: #f6f8fa; --surface-2: #ffffff; --sunk: #f6f8fa; --sunk-2: #eef2f6; --ink: #1f2328; --ink-strong: #ffffff; --muted: #656d76; --muted-2: #6e7781; --faint: #8c959f; --rule: #a8b4c1; --rule-2: #8593a4; --rule-3: #66768a; --control: #eaeef2; --accent: #0969da; --accent-2: #0550ae; --accent-ink: #0a3069; --accent-edge: #9ac7ff; --accent-soft: #ddf4ff; --primary: #0969da; --primary-edge: #0a5cc4; --primary-hot: #0757ba; --scrim: #1f232866; --good: #1a7f37; --good-soft: #dafbe1; --good-edge: #aceebb; --bad: #d1242f; --bad-2: #a40e26; --bad-soft: #ffebe9; --bad-edge: #ffcecb; --warn: #9a6700; --warn-2: #7d4e00; --warn-soft: #fff8c5; --warn-edge: #eac54f; --warn-deep: #7d4e00; --wordmark: linear-gradient(to right, #d1004b, #c2410c, #4c1d95, #0369a1, #d1004b); --wordmark-hover: linear-gradient(to right, #047857, #0891b2, #1d4ed8, #047857); --wordmark-glow: rgba(3, 105, 161, .35); color-scheme: light; } /* The stamp has to be able to force dark back on, against a light device. */ :root[data-theme="dark"]{ --bg: #0b0f17; --surface: #111826; --surface-2: #1c2637; --sunk: #0d1420; --sunk-2: #0d1725; --ink: #e6edf3; --ink-strong: #fff; --muted: #8b949e; --muted-2: #6e7681; --faint: #5b6b80; --rule: #1f2a3a; --rule-2: #2b3f5c; --rule-3: #294066; --control: #21324a; --accent: #58a6ff; --accent-2: #8fc4ff; --accent-ink: #cfe4ff; --accent-edge: #2b5f8f; --accent-soft: #16283f; --primary: #1f6feb; --primary-edge: #388bfd; --primary-hot: #2b7ef5; --scrim: #000a; --good: #3fb950; --good-soft: #12331f; --good-edge: #1e4620; --bad: #f85149; --bad-2: #ff7b72; --bad-soft: #3d1418; --bad-edge: #5c2126; --warn: #d29922; --warn-2: #f0b429; --warn-soft: #3a2d10; --warn-edge: #7a5c1e; --warn-deep: #c47f14; --wordmark: linear-gradient(to right, #ff2a5f, #ff7e40, #6200ff, #00e5ff, #ff2a5f); --wordmark-hover: linear-gradient(to right, #00ff87, #60efff, #0061ff, #00ff87); --wordmark-glow: rgba(0, 229, 255, .4); color-scheme: dark; } /* ── The switch ─────────────────────────────────────────────────────────────── Here rather than in ui.css because theme.css is the one stylesheet every page loads: the console and the chat do not load ui.css, and a control that is styled on five pages out of seven is worse than no control at all. Sized and coloured from the tokens above, so it is legible on either ground without a second rule. */ .tsw{ display: inline-flex; align-items: center; gap: .375rem; background: var(--control); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 8px; padding: .4375rem .625rem; font: inherit; font-size: .8125rem; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .tsw:hover{ border-color: var(--rule-3); } .tsw:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; } .tsw[hidden]{ display: none; } .tsw-icon{ font-size: .9375rem; line-height: 1; } /* Under about 30rem the label is the first thing worth losing: the icon already says which way the page will go, and the accessible name is unaffected. */ @media (max-width: 30rem){ .tsw-name{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tsw{ padding: .4375rem .5rem; } }