From 09611c095861ef482f7062afe207de0acc72e1e3 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Fri, 27 Feb 2026 20:02:10 -0500
Subject: [PATCH] feat(machine): add light/dark toggle on idle screen

Subtle sun/moon button in bottom-left corner lets users switch
between light and dark mode. Persists via localStorage.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/views/IdleView.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/machine/src/views/IdleView.vue b/apps/machine/src/views/IdleView.vue
index 2bc3a7b..2a305be 100644
--- a/apps/machine/src/views/IdleView.vue
+++ b/apps/machine/src/views/IdleView.vue
@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { nip19 } from 'nostr-tools'
 import { useAtmStore } from '@/stores/atm'
+import { useTheme } from '@/composables/useTheme'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
@@ -11,6 +12,7 @@ import QRCode from '@/components/QRCode.vue'
 
 const router = useRouter()
 const atmStore = useAtmStore()
+const { colorMode } = useTheme()
 const lndconnectUrl = import.meta.env.VITE_LNDCONNECT_URL || ''
 const showZeusQR = ref(false)
 const showLpQR = ref(false)
@@ -197,6 +199,16 @@ function handleCashOut() {
       </div>
     </div>
 
+    <!-- Light/dark toggle -->
+    <Button
+      variant="ghost"
+      size="sm"
+      class="absolute bottom-4 left-4 text-xs text-muted-foreground"
+      @click="colorMode = colorMode === 'dark' ? 'light' : 'dark'"
+    >
+      {{ colorMode === 'dark' ? '☀' : '☾' }}
+    </Button>
+
     <!-- Debug toggle (only visible when debug bar is hidden, never in production) -->
     <Button
       v-if="!atmStore.debugMode && atmStore.allowMockFallback"