Themeable selection color via --selection-bg, shared by page and CodeMirror

Nitro's orange accent selection fill clashed with accent-colored text.
Introduce --selection-bg (base: accent 30% mix, as before) used by both
::selection and the editors' selection layer; nitro overrides it with a
neutral grey. CodeMirror's selection needed a baseTheme with its exact
&light/&dark selectors to win, and is now hidden when unfocused like a
normal input.
This commit is contained in:
2026-08-29 03:39:24 +00:00
parent e3fbce8ece
commit daa1670653
3 changed files with 24 additions and 8 deletions
+4 -1
View File
@@ -18,6 +18,9 @@
/* Links stay quiet — mostly text color with a hint of the accent —
and light up to the full accent on hover. */
--link: color-mix(in oklab, var(--text) 50%, var(--accent));
/* Selection fill for page text and the CodeMirror editors; themes
override when the accent tint clashes with accent-colored text. */
--selection-bg: color-mix(var(--accent) 30%, transparent);
/* Code highlighting palette, consumed by pygments.css: complete light and
dark sets (background included), resolved by light-dark() from the
used color-scheme. A theme picks a set simply by declaring
@@ -71,7 +74,7 @@
}
::selection {
background: color-mix(var(--accent) 30%, transparent);
background: var(--selection-bg);
color: inherit;
}