From 8d7de460f916c6342c7917bf716a907f5d9b49b4 Mon Sep 17 00:00:00 2001
From: Mikkel Georgsen <msgeorgsen@gmail.com>
Date: Tue, 31 Mar 2026 14:19:35 +0200
Subject: [PATCH] feat(07-02): add theme picker section to
 InstanceGeneralSettings

- Import useTheme, THEME_META, type Theme from ThemeContext
- Add ORDERED_THEMES constant with three theme IDs
- Add theme picker section as first section in General Settings
- Color swatches use inline backgroundColor (hardcoded hex, not CSS vars)
- Active theme highlighted with border-primary bg-primary/10
---
 ui/src/pages/InstanceGeneralSettings.tsx | 33 ++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/ui/src/pages/InstanceGeneralSettings.tsx b/ui/src/pages/InstanceGeneralSettings.tsx
index 4b5e6b9c..6f11b450 100644
--- a/ui/src/pages/InstanceGeneralSettings.tsx
+++ b/ui/src/pages/InstanceGeneralSettings.tsx
@@ -4,6 +4,7 @@ import type { PatchInstanceGeneralSettings } from "@paperclipai/shared";
 import { SlidersHorizontal } from "lucide-react";
 import { instanceSettingsApi } from "@/api/instanceSettings";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { useTheme, THEME_META, type Theme } from "../context/ThemeContext";
 import { queryKeys } from "../lib/queryKeys";
 import { cn } from "../lib/utils";
 
@@ -13,6 +14,7 @@ export function InstanceGeneralSettings() {
   const { setBreadcrumbs } = useBreadcrumbs();
   const queryClient = useQueryClient();
   const [actionError, setActionError] = useState<string | null>(null);
+  const { theme, setTheme } = useTheme();
 
   useEffect(() => {
     setBreadcrumbs([
@@ -73,6 +75,37 @@ export function InstanceGeneralSettings() {
         </div>
       )}
 
+      <section className="rounded-xl border border-border bg-card p-5">
+        <div className="space-y-1.5">
+          <h2 className="text-sm font-semibold">Theme</h2>
+          <p className="text-sm text-muted-foreground">Choose the visual theme for Nexus.</p>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-3">
+          {ORDERED_THEMES.map((id) => {
+            const meta = THEME_META[id];
+            return (
+              <button
+                key={id}
+                type="button"
+                onClick={() => setTheme(id)}
+                className={cn(
+                  "flex items-center gap-2.5 rounded-lg border px-3 py-2 text-sm transition-colors",
+                  theme === id
+                    ? "border-primary bg-primary/10 text-primary"
+                    : "border-border bg-card text-foreground hover:border-ring",
+                )}
+              >
+                <span
+                  className="h-4 w-4 rounded-full border border-border/50 shrink-0"
+                  style={{ backgroundColor: meta.primary }}
+                />
+                {meta.label}
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
       <section className="rounded-xl border border-border bg-card p-5">
         <div className="flex items-start justify-between gap-4">
           <div className="space-y-1.5">