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>
This commit is contained in:
Patrick Mulligan 2026-02-27 20:02:10 -05:00
commit 09611c0958

View file

@ -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"