From 9c3482738790920b49e76ac9742ad60a26388fee Mon Sep 17 00:00:00 2001
From: Alexander Heldt <me@alexanderheldt.se>
Date: Tue, 1 Sep 2026 06:48:19 +0000
Subject: [PATCH] White text on the awake timers in the dark theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/changelog.json |  1 +
 src/style.css      | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/changelog.json b/src/changelog.json
index 5408c65..64372f4 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -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" },
diff --git a/src/style.css b/src/style.css
index 12523e2..d462c73 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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