feat(machine): operator branding — optional logo-dark.png variant

Sibling-file convention: drop a logo-dark.png alongside logo.png in
/var/lib/bitspire/branding/ and the renderer uses it whenever the
effective color mode is dark, falling back to logo.png when absent.
No branding.json change — the file name itself is the contract.

Wiring:
- electron/main.ts:loadBranding() reads logo-dark.png and base64-encodes
  it into logoDarkDataUrl on the IPC payload
- composables/useTheme.ts exposes an `isDark` computed that resolves
  the 'system' colorMode via the prefers-color-scheme media query (and
  reacts to OS-level dark-mode changes via the existing listener)
- composables/useBranding.ts switches logoUrl reactively based on isDark
- IdleView already binds to logoUrl — no template change needed

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/machine/src/composables/useBranding.ts

@@ -1,6 +1,6 @@
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import type { BrandingConfig } from '@/types/electron'
-import { applyBrandingTheme } from './useTheme'
+import { applyBrandingTheme, useTheme } from './useTheme'
 
 // Reactive branding state — sourced from a BrandingSource (V1: local file
 // via Electron IPC; V2 per issue #48: replaceable Nostr event from
@@ -8,9 +8,18 @@ import { applyBrandingTheme } from './useTheme'
 const DEFAULT_LOGO = '/logo.png'
 const DEFAULT_TITLE = 'Bitcoinmat'
 
-const logoUrl = ref<string>(DEFAULT_LOGO)
+const logoLightUrl = ref<string>(DEFAULT_LOGO)
+const logoDarkUrl = ref<string | null>(null)
 const title = ref<string>(DEFAULT_TITLE)
 
+const { isDark } = useTheme()
+
+/** Effective logo: dark variant when dark mode is active AND operator
+ *  supplied one, otherwise the regular logo. */
+const logoUrl = computed(() =>
+  isDark.value && logoDarkUrl.value ? logoDarkUrl.value : logoLightUrl.value
+)
+
 /**
  * Apply a branding payload to the live UI. Pass null to revert to defaults.
  * Single mutation point — V2's Nostr-event source calls the same setter when
@@ -18,12 +27,14 @@ const title = ref<string>(DEFAULT_TITLE)
  */
 export function setBranding(b: BrandingConfig | null) {
   if (!b) {
-    logoUrl.value = DEFAULT_LOGO
+    logoLightUrl.value = DEFAULT_LOGO
+    logoDarkUrl.value = null
     title.value = DEFAULT_TITLE
     applyBrandingTheme(null)
     return
   }
-  logoUrl.value = b.logoDataUrl || DEFAULT_LOGO
+  logoLightUrl.value = b.logoDataUrl || DEFAULT_LOGO
+  logoDarkUrl.value = b.logoDarkDataUrl || null
   title.value = b.title || DEFAULT_TITLE
   applyBrandingTheme(
     b.theme as Parameters<typeof applyBrandingTheme>[0],

apps/machine/src/composables/useTheme.ts

@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 export type ThemeId = 'gruvbox' | 'catppuccin' | 'cyberpunk' | 'dracula' | 'nord' | 'tokyo-night'
 export type ColorMode = 'light' | 'dark' | 'system'
@@ -112,12 +112,22 @@ function applyColorMode(mode: ColorMode) {
 
 // Listen for system preference changes when mode is 'system'
 const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-mediaQuery.addEventListener('change', () => {
+const prefersDark = ref(mediaQuery.matches)
+mediaQuery.addEventListener('change', (e) => {
+  prefersDark.value = e.matches
   if (colorMode.value === 'system') {
     applyColorMode('system')
   }
 })
 
+/** True when the effective color mode is dark (resolves 'system' via media query).
+ *  Consumed by useBranding to pick logo-dark.png over logo.png. */
+const isDark = computed(() => {
+  if (colorMode.value === 'dark') return true
+  if (colorMode.value === 'light') return false
+  return prefersDark.value
+})
+
 // Apply on load
 applyTheme(current.value)
 applyColorMode(colorMode.value)
@@ -146,5 +156,6 @@ export function useTheme() {
     current,
     themes,
     colorMode,
+    isDark,
   }
 }

apps/machine/src/types/electron.d.ts

@@ -38,6 +38,9 @@ export interface BrandingConfig {
   customColorsDark?: Record<string, string>
   /** Base64 data URL of operator-supplied logo.png. Null when no file present. */
   logoDataUrl: string | null
+  /** Base64 data URL of operator-supplied logo-dark.png; renderer uses this
+   *  when dark mode is active, falling back to logoDataUrl when null. */
+  logoDarkDataUrl: string | null
 }
 
 export interface AtmSecrets {