lucasw89/budget2.0
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix(ui): theme the radio tint and the text selection

Browse Source 
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) <[email protected]>
This commit is contained in:
Lucas Winther
2026-09-02 22:58:07 +02:00
co-authored by Claude Opus 5
parent f85b967a9d
commit da8431a57f
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+9
View File
@@ -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.