From e40fa0d252e780a93b4ed66cd054db2048fe4ae3 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 13:51:25 -0400
Subject: [PATCH] =?UTF-8?q?feat(web/m7-362):=20Settings=20=E2=86=92=20Appe?=
 =?UTF-8?q?arance=20card=20with=20dark/light/system=20selector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/routes/settings/+page.svelte | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index 9bb83748..b007e5a7 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/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>