alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

White text on the awake timers in the dark theme

Browse Source 
The last two attempts at this were invisible because they only moved the light
theme's ink. --wake-ink flips per theme and the dark value was left at #f5c451
throughout — a bright gold, on a pill tinted the same hue. Yellow on yellow was
exactly the report, and it was untouched by both changes made in answer to it.

--wake-timer-ink carries white for the two timers on the dark theme, where the
pill is a deep olive and white lands at 12.99:1. The light theme keeps the gold
ink: the same pill there is near-white cream, and white on it would be 1.05:1 —
gone. So this is one value that cannot be shared across the themes even in
principle, only chosen per theme.

Kept apart from --wake-ink so the AWAKE labels in the sleep & wake list stay
gold and go on matching the stripe beside them, which is the one place the
colour is carrying meaning rather than just filling in text.
This commit is contained in:
Alexander Heldt
2026-09-01 06:48:19 +00:00
parent 3baff5f6dc
commit 9c34827387
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+10 -2
View File
@@ -19,6 +19,12 @@
--sleep-ink: #4258cc;
--wake: #f2b705;
--wake-ink: #6f4d00;
/* The two timers want plain white on the dark theme, where the pill is a
deep olive and a gold font just reads as more yellow. In the light theme
the same pill is near-white cream, so white would vanish and it keeps the
ink. Separate from --wake-ink so the list's AWAKE labels stay gold and go
on matching their stripe. */
--wake-timer-ink: #6f4d00;
--note: #6f7a90;
--danger: #d64545;
--gain: #2e9e5b;
@@ -41,6 +47,7 @@
--accent-soft: #2a2640;
--sleep-ink: #8ba4ff;
--wake-ink: #f5c451;
--wake-timer-ink: #ffffff;
--border: #2c2a3a;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
}
@@ -54,6 +61,7 @@
--accent-soft: #2a2640;
--sleep-ink: #8ba4ff;
--wake-ink: #f5c451;
--wake-timer-ink: #ffffff;
--border: #2c2a3a;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
}
@@ -231,7 +239,7 @@ body::before {
light enough to read as sunshine is never legible as text on a pale ground.
12% where asleep takes 18% — equal percentages of these two hues are not
equally strong, and yellow at 18% shouted while the blue did not. */
.bar-clock.awake { background: color-mix(in srgb, var(--wake) 12%, var(--surface)); color: var(--wake-ink); }
.bar-clock.awake { background: color-mix(in srgb, var(--wake) 12%, var(--surface)); color: var(--wake-timer-ink); }
.big-clock {
text-align: center;
@@ -260,7 +268,7 @@ body::before {
.big-clock.asleep { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sleep) 10%, var(--surface))); }
.big-clock.asleep .bc-time { color: var(--sleep-ink); }
.big-clock.awake { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--wake) 10%, var(--surface))); }
.big-clock.awake .bc-time { color: var(--wake-ink); }
.big-clock.awake .bc-time { color: var(--wake-timer-ink); }
/* Quick actions: a stack of explicit rows (see index.html) instead of one
auto-fit grid, so the grouping is the same at every width. Equal columns