/* ============================================================================ NIGHT MODE, AND A LITTLE MORE COLOUR Every page already builds its look from the same handful of custom properties, so night mode is a matter of giving those properties different values rather than restyling anything. Nothing below names a component. Three states, which is what a theme control actually has to handle: no choice made follow the operating system, via prefers-color-scheme light chosen stay light even at night dark chosen stay dark even in daylight The choice is written to data-theme on , and the media query is written so an explicit light choice beats it. ========================================================================= */ /* ---- the dark palette --------------------------------------------------- Not the light one inverted. Pure white on pure black vibrates and is hard to read for long, which is the whole activity here, so this is a warm near black with text a little under white, and the accents lifted because a colour that reads well on cream disappears on charcoal. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #14150F; --panel: #1C1D17; --ink: #EDEDE6; --ink-2: #C9C9C0; --ink-3: #9A9A90; --rule: #2E2F27; --rule-strong: #4A4B41; --disc: #7FC6D8; --disc-soft: #1A2B31; --debate: #D8A46A; --debate-soft: #2E2419; --up: #E08A5A; --down: #7FA3D0; --mine: #23241B; --mine-line: #8A7B52; } } :root[data-theme="dark"] { --canvas: #14150F; --panel: #1C1D17; --ink: #EDEDE6; --ink-2: #C9C9C0; --ink-3: #9A9A90; --rule: #2E2F27; --rule-strong: #4A4B41; --disc: #7FC6D8; --disc-soft: #1A2B31; --debate: #D8A46A; --debate-soft: #2E2419; --up: #E08A5A; --down: #7FA3D0; --mine: #23241B; --mine-line: #8A7B52; } /* Several pages fade their nav and their hero into the page with a gradient, and a gradient needs the canvas colour with alpha on it. There is no way to put alpha on a hex custom property, so the same colour is published again as three numbers. Both must be changed together. */ :root { --canvas-rgb: 241,240,237; } :root[data-theme="dark"] { --canvas-rgb: 20,21,15; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) { --canvas-rgb: 20,21,15; } } /* Form controls and scrollbars come from the browser, not from us, and stay light unless told. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ---- the artwork is left alone -------------------------------------------- There were filters here: everything dimmed a little, and the hero film and plate inverted on the grounds that the mark is ink on paper. Both were wrong, and the second was badly wrong. The hero film is dark lines on a light ground, so inverting it turned the whole hero into a near-black rectangle with faint grey threads, and the scrim that exists to keep white text legible over a bright film became a white blob sitting behind the words. A theme should change the page around the work, not the work. Browsers do not dim photographs in dark mode and there is no reason for this to either. A bright hero on a dark page is a bright hero, which is what it was designed to be. */ /* ---- and neither does anything printed on top of it ---------------------- The words over the hero are dark ink carrying a white glow, which is how they stay legible against a bright film. The theme flipped the ink to near white and left the glow alone, so dark mode had white text with a white halo sitting on a pale film: completely invisible, and the actual thing Vish was looking at. The film does not change with the theme, so nothing written on it can either. These are pinned to the light values in both themes on purpose, and the .fade and .scrim that blend the film into the page are pinned for the same reason. */ :root[data-theme="dark"] .hero .band, :root[data-theme="dark"] .hero .b-line { color:#191917; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero .band, :root:not([data-theme="light"]) .hero .b-line { color:#191917; } } /* The brand mark is drawn with a hard-coded fill, so it needs telling. */ :root[data-theme="dark"] .nav-brand svg path[fill="#191917"], :root[data-theme="dark"] .sb-head svg path[fill="#191917"] { fill: #EDEDE6; } :root[data-theme="dark"] .nav-brand svg circle[fill="#F1F0ED"], :root[data-theme="dark"] .sb-head svg circle[fill="#F1F0ED"] { fill: #14150F; } :root[data-theme="dark"] .nav-brand svg path[stroke="#191917"], :root[data-theme="dark"] .sb-head svg path[stroke="#191917"] { stroke: #EDEDE6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-brand svg path[fill="#191917"], :root:not([data-theme="light"]) .sb-head svg path[fill="#191917"] { fill: #EDEDE6; } :root:not([data-theme="light"]) .nav-brand svg circle[fill="#F1F0ED"], :root:not([data-theme="light"]) .sb-head svg circle[fill="#F1F0ED"] { fill: #14150F; } :root:not([data-theme="light"]) .nav-brand svg path[stroke="#191917"], :root:not([data-theme="light"]) .sb-head svg path[stroke="#191917"] { stroke: #EDEDE6; } } /* ---- the call to action is a designed block, not page chrome -------------- It is deliberately inverted: cream text on ink, a dark band across a light page. The text colours are written as cream literals and the ground is var(--ink), so the dark theme turned the ground near-white and left cream text sitting on it. Pinned to its dark treatment in both themes, for the same reason as the hero: it was designed as a dark block and it still reads as one on a dark page. */ :root[data-theme="dark"] .cta{ background:#191917; color:#F1F0ED; } :root[data-theme="dark"] .cta h2, :root[data-theme="dark"] .cta-mail, :root[data-theme="dark"] .cta .btn{ color:#F1F0ED; } :root[data-theme="dark"] .cta .btn{ background:transparent; border-color:rgba(241,240,237,.5); } :root[data-theme="dark"] .cta .btn:hover{ background:#F1F0ED; color:#191917; border-color:#F1F0ED; } :root[data-theme="dark"] .cta .field input, :root[data-theme="dark"] .cta .field textarea{ color:#F1F0ED; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta{ background:#191917; color:#F1F0ED; } :root:not([data-theme="light"]) .cta h2, :root:not([data-theme="light"]) .cta-mail, :root:not([data-theme="light"]) .cta .btn{ color:#F1F0ED; } :root:not([data-theme="light"]) .cta .btn{ background:transparent; border-color:rgba(241,240,237,.5); } :root:not([data-theme="light"]) .cta .btn:hover{ background:#F1F0ED; color:#191917; border-color:#F1F0ED; } :root:not([data-theme="light"]) .cta .field input, :root:not([data-theme="light"]) .cta .field textarea{ color:#F1F0ED; } } /* ---- the control -------------------------------------------------------- */ .theme-btn{ display:flex;align-items:center;gap:7px; background:none;border:0;padding:0;cursor:pointer;color:var(--ink-3); font-family:var(--mono, ui-monospace, monospace); font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; } .theme-btn:hover{color:var(--ink)} .theme-btn svg{width:14px;height:14px;display:block;fill:none; stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .theme-btn .sun{display:none} :root[data-theme="dark"] .theme-btn .sun{display:block} :root[data-theme="dark"] .theme-btn .moon{display:none} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .sun{display:block} :root:not([data-theme="light"]) .theme-btn .moon{display:none} } @media (max-width:600px){ .theme-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} } /* ---- a little more colour, in the places that carry meaning -------------- The feed was black text on cream with two accents. These give the two kinds of thread an edge you can see from across the page, so scanning the list tells you what kind of room you are looking into before you read a word. */ .card{border-left:3px solid var(--rule)} .card.discussion{border-left-color:var(--disc)} .card.debate{border-left-color:var(--debate)} .card.mine{border-left-color:var(--mine-line)} .card:hover{border-color:var(--rule-strong)} .card.discussion:hover{border-left-color:var(--disc)} .card.debate:hover{border-left-color:var(--debate)} .tagk{background:var(--disc-soft)} .card.debate .tagk{background:var(--debate-soft)} /* The vote rail was the same grey whatever had happened in the thread. */ .cvote .n{color:var(--ink-2)} .card.debate .cvote .n{color:var(--debate)} .card.discussion .cvote .n{color:var(--disc)} /* Reduced motion still gets the colours; only the fades go. */ @media (prefers-reduced-motion: reduce){ .theme-btn, .card { transition: none !important; } }