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:
parent
a6d69a385c
commit
09611c0958
1 changed files with 12 additions and 0 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue