feat(web/m7-362): Settings → Appearance card with dark/light/system selector

web/src/routes/settings/+page.svelte

@@ -7,6 +7,7 @@
     createEnabledMutation,
     type LBStatus
   } from '$lib/api/listenbrainz';
+  import { theme, setTheme, type ThemePreference } from '$lib/stores/theme.svelte';
 
   const queryClient = useQueryClient();
 
@@ -35,6 +36,36 @@
 <div class="space-y-6">
   <h1 class="text-2xl font-semibold">Settings</h1>
 
+  <section class="space-y-3 rounded border border-border bg-surface p-4">
+    <h2 class="text-lg font-semibold">Appearance</h2>
+
+    <fieldset class="space-y-2">
+      <legend class="block text-sm text-text-secondary">Theme</legend>
+      <div class="flex gap-2">
+        {#each ['dark', 'light', 'system'] as opt (opt)}
+          <label
+            class="flex cursor-pointer items-center gap-2 rounded border border-border px-3 py-1.5 text-sm
+                   {theme.value === opt ? 'bg-action-secondary text-action-fg' : 'text-text-primary hover:bg-surface-hover'}"
+          >
+            <input
+              type="radio"
+              name="theme"
+              value={opt}
+              checked={theme.value === opt}
+              onchange={() => setTheme(opt as ThemePreference)}
+              class="sr-only"
+            />
+            <span class="capitalize">{opt}</span>
+          </label>
+        {/each}
+      </div>
+    </fieldset>
+
+    <p class="text-xs text-text-secondary">
+      System follows your device's light/dark preference.
+    </p>
+  </section>
+
   <section class="space-y-4 rounded border border-border bg-surface p-4">
     <h2 class="text-lg font-semibold">ListenBrainz</h2>