White text on the awake timers in the dark theme

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
+1
View File
@@ -1,4 +1,5 @@
[
{ "date": "2026-09-01", "text": "On the dark theme the awake timers are white now — both “Awake for” at the top and the pill in the day bar — instead of yellow text on a yellow-tinted pill. The light theme keeps its dark gold, where white would disappear into a near-white pill" },
{ "date": "2026-09-01", "text": "Toned the awake timer down: the pill in the day bar is a fainter yellow and its text a good deal darker, so “Awake for” is comfortable to read rather than technically legible. The Awake labels elsewhere darkened with it" },
{ "date": "2026-08-31", "text": "The asleep timer text is a deeper blue, so “Asleep for” in the day-bar pill and on the big card is properly readable against its own pale blue background instead of the near-invisible blue-on-blue it was — the same treatment the awake gold just got, and it applies to the Asleep labels in the Sleep & wake list too" },
{ "date": "2026-08-31", "text": "The awake timer is sunshine too now — both the big “Awake for” card and the pill in the day bar — so the whole app tells asleep and awake apart by night-blue against day-gold rather than by blue against purple" },
+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