Changeset 5b6f93b in Klonkt for src/assets/js/ward-theme.js

Timestamp:

08/12/2026 09:54:01 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

3866994

Parents:

5e0fea7

Message:

Ward-PWA: licht thema en kaarten zonder tussenruimtes

Twee wensen van Robin (12-8).

LICHT, NIET DONKER. De basis is omgedraaid: lichte achtergrond, donkere
tekst, witte kaarten. De themakleur kleurt nog steeds het accent, maar
de achtergrondtint mengt nu naar WIT in plaats van naar zwart, zodat de
gekozen kleur een vleugje geeft zonder de leesbaarheid te kosten. Alle
losse donkere kleuren (inputvelden, secundaire knoppen, de glasplaat van
het gesprek) zijn meegegaan.

KAARTEN ZONDER TUSSENRUIMTES, zoals de Shaer-apps. Was een grid met
gaten; nu CSS multi-column masonry: de kaarten raken elkaar, gepakt in
kolommen die naar breedte meer worden (net als het staggered grid van de
app). Een dunne lijn onder elke kaart en tussen de kolommen houdt ze
leesbaar zonder ruimte ertussen.

Changed files:
src/assets/css/ward.css

• :root naar een licht palet; alle donkere resten omgezet
• .cards als column-masonry, gap 0, hairlines

src/assets/js/ward-theme.js

• achtergrondtint mengt naar wit ipv zwart

remarks: 906 tests groen. Kleur en dichtheid zijn oogdingen; even kijken
op dev of het licht genoeg oogt en de kolommen goed pakken.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/assets/js/ward-theme.js (modified) (2 diffs)

src/assets/js/ward-theme.js

@@ -43 +43 @@
 /**
  * De kleur toepassen: het accent dat de knoppen, de bubbels en de (+) dragen,
- * plus een zachte tint over de donkere achtergrond zodat de hele hemel de
+ * plus een zachte tint over de LICHTE achtergrond zodat de hele hemel de
  * gekozen kleur ademt. De tekst-op-accent volgt de luminantie.
  */
@@ -50 +50 @@
   root.setProperty('--accent', hex(rgb));
   root.setProperty('--on-accent', onSky(rgb));
-  // De achtergrond blijft donker (leesbaar), maar krijgt een vleugje van de
-  // kleur: een verticale gradient van de getinte nacht naar bijna zwart.
+  // De achtergrond is LICHT (Robins wens 12-8) maar krijgt een vleugje van de
+  // kleur: een verticale gradient van een lichte tint naar bijna wit. De kleur
+  // wordt sterk richting wit gemengd, zodat de tekst leesbaar blijft.
   const r = (rgb >> 16) & 0xff, g = (rgb >> 8) & 0xff, b = rgb & 0xff;
-  const tint = (f) => `rgb(${Math.round(r * f + 20 * (1 - f))},${Math.round(g * f + 26 * (1 - f))},${Math.round(b * f + 36 * (1 - f))})`;
-  root.setProperty('--bg-top', tint(0.22));
-  root.setProperty('--bg-bottom', tint(0.06));
+  const tint = (f) => `rgb(${Math.round(r * f + 255 * (1 - f))},${Math.round(g * f + 255 * (1 - f))},${Math.round(b * f + 255 * (1 - f))})`;
+  root.setProperty('--bg-top', tint(0.10));
+  root.setProperty('--bg-bottom', tint(0.03));
 }