Commit 4df013a904

4df013a904a7207b10a91b2984bf6402ba410263

parent: 85af9d4bb7

Verified · cmc

cmc <hello@cleberg.net> · 2026-08-24 17:12 UTC

web: declare color-scheme

color-scheme: light dark on :root for native form controls and
scrollbars per scheme; the pinned-light code block declares
color-scheme: light.

Layout: unified · split

internal/web/static/style.css +5 −1
@@ -2,6 +2,10 @@
2 Tokens first; components use tokens only. No external requests. */ 2 Tokens first; components use tokens only. No external requests. */
3 3
4:root { 4:root {
5 /* declare native light+dark support: correct form controls and
6 scrollbars per scheme, and opt out of browser auto-darkening */
7 color-scheme: light dark;
8
5 /* palette */ 9 /* palette */
6 --bg: #ffffff; 10 --bg: #ffffff;
7 --fg: #1f2328; 11 --fg: #1f2328;
@@ -284,7 +288,7 @@ button.linklike:hover { text-decoration: underline; filter: none; }
284} 288}
285/* chroma emits inline styles for a light background; pin code blocks to 289/* chroma emits inline styles for a light background; pin code blocks to
286 light colors in both schemes so unstyled tokens stay legible. */ 290 light colors in both schemes so unstyled tokens stay legible. */
287.code { background: #f8f8f8; color: #1a1a1a; padding: var(--sp-3) var(--sp-4); } 291.code { background: #f8f8f8; color: #1a1a1a; padding: var(--sp-3) var(--sp-4); color-scheme: light; }
288.code pre { margin: 0; background: transparent !important; } 292.code pre { margin: 0; background: transparent !important; }
289@media (prefers-color-scheme: dark) { 293@media (prefers-color-scheme: dark) {
290 .code { border-color: var(--line); } 294 .code { border-color: var(--line); }