From d61e48b3e68a95cf86764f40a793e7aad6e9a37b Mon Sep 17 00:00:00 2001 From: Padreug Date: Mon, 11 May 2026 18:16:39 +0200 Subject: [PATCH] fix(cms): KDS card text legible on dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The age-escalation highlights (bg-amber-1 / bg-orange-1 / bg-red-1) are very pale Quasar shades. On LNbits dark mode the q-card inherits a near-white text color from the theme — paired with the pale background that's white-on-cream, which is what the user reported: the '1x Coffee' on a ready-card was barely visible. Pin an explicit text-grey-9 alongside each pale bg so dark text on light background renders in both themes. The 'no highlight' branch returns '' unchanged, so non-aged orders still use the q-card's theme-aware default text color. --- static/js/kds.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/static/js/kds.js b/static/js/kds.js index bc0980d..ab4f0cc 100644 --- a/static/js/kds.js +++ b/static/js/kds.js @@ -25,10 +25,16 @@ window.app = Vue.createApp({ }, cardClass(order) { // Visually escalate as orders age. >5min = highlight; >15min = alarm. + // + // Pair every pale `bg-{color}-1` with an explicit dark text color + // — otherwise on LNbits dark mode the q-card inherits light text + // and renders white-on-cream, which is unreadable. The non- + // highlighted branch (default theme) returns '' so the q-card + // keeps its theme-aware defaults. const ageSec = (Date.now() - new Date(order.time).getTime()) / 1000 - if (order.status === 'ready') return 'bg-amber-1' - if (ageSec > 900) return 'bg-red-1' - if (ageSec > 300) return 'bg-orange-1' + if (order.status === 'ready') return 'bg-amber-1 text-grey-9' + if (ageSec > 900) return 'bg-red-1 text-grey-9' + if (ageSec > 300) return 'bg-orange-1 text-grey-9' return '' }, async fetchActive() {