aiolabs/restaurant
8
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

fix(cms): KDS card text legible on dark mode

Browse source 
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.
This commit is contained in:
Padreug 2026-05-11 18:16:39 +02:00
commit 42746d7321
2 changed files with 29 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
static/js/kds.js
View file

@ -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() {