From d5842bfd151c70ba7fa46ea4b4ddfed081ea640b Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Sat, 24 Jan 2026 13:19:22 -0500
Subject: [PATCH] Use warm colors for QR code display in dark mode

- Warm cream background (#f5f0e6) instead of harsh white
- Gruvbox dark brown foreground (#3c3836) for good contrast
- Maintains ~10:1 contrast ratio for reliable phone scanning
- Easier on eyes in dark ATM environments

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../apps/machine/src/components/QRCode.vue    | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/lamassu-next/apps/machine/src/components/QRCode.vue b/lamassu-next/apps/machine/src/components/QRCode.vue
index f698325..aa3401f 100644
--- a/lamassu-next/apps/machine/src/components/QRCode.vue
+++ b/lamassu-next/apps/machine/src/components/QRCode.vue
@@ -8,12 +8,30 @@ const props = defineProps<{
 }>()
 
 const qrSize = computed(() => props.size ?? 200)
+
+// Warm cream background - easier on eyes in dark mode
+// Dark brown foreground - maintains high contrast for scanning
+const qrBackground = '#f5f0e6' // Warm cream
+const qrForeground = '#3c3836' // Gruvbox dark0_hard - ensures scanability
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center rounded-lg bg-white p-4">
-    <QrcodeVue :value="value" :size="qrSize" level="M" render-as="svg" />
-    <code class="mt-2 block max-w-full break-all px-2 text-center text-xs text-zinc-500">
+  <div
+    class="flex flex-col items-center justify-center rounded-xl p-5"
+    :style="{ backgroundColor: qrBackground }"
+  >
+    <QrcodeVue
+      :value="value"
+      :size="qrSize"
+      level="M"
+      render-as="svg"
+      :background="qrBackground"
+      :foreground="qrForeground"
+    />
+    <code
+      class="mt-3 block max-w-full break-all px-2 text-center text-xs"
+      :style="{ color: qrForeground }"
+    >
       {{ value.slice(0, 32) }}...
     </code>
   </div>