From da8431a57f5a48e2ba99104540b559cf0c8b8ba0 Mon Sep 17 00:00:00 2001 From: Lucas Winther Date: Wed, 2 Sep 2026 22:58:07 +0200 Subject: [PATCH] fix(ui): theme the radio tint and the text selection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two surfaces the browser draws for itself, both shipping a default that belongs to no theme in this app. `accent-color` is what tints a native radio or checkbox. Unset, the split editor's "rounding" radio was platform blue — the one colour on screen picked by neither theme. It now takes the brand teal in both. `::selection` likewise: dragging over a figure gave the OS highlight. It now uses the accent and its paired ink, so selecting text in the dark theme stays readable. Co-Authored-By: Claude Opus 5 (1M context) --- src/index.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/index.css b/src/index.css index 4ef7b1e..901c750 100755 --- a/src/index.css +++ b/src/index.css @@ -145,12 +145,21 @@ @layer base { :root { color-scheme: light; + /* The parts the browser draws for itself. `accent-color` is what tints a + native radio or checkbox — left unset it is the platform blue, which is + the one colour on screen belonging to no theme here. */ + accent-color: var(--budget-accent); } .dark { color-scheme: dark; } + ::selection { + background: var(--budget-accent); + color: var(--budget-accent-ink); + } + body { /* Was `grid place-items-center`, which centred short pages VERTICALLY — the month view floated in the middle of the viewport on an empty month.