Add some color themes

frontend/src/components/settings/SettingsDatabaseSection.tsx

@@ -11,6 +11,7 @@ import {
   getReopenLastConversationEnabled,
   setReopenLastConversationEnabled,
 } from '../../utils/lastViewedConversation';
+import { ThemeSelector } from './ThemeSelector';
 import { getLocalLabel, setLocalLabel, type LocalLabel } from '../../utils/localLabel';
 import type { AppSettings, AppSettingsUpdate, HealthStatus } from '../../types';
 
@@ -223,6 +224,12 @@ export function SettingsDatabaseSection({
 
       <div className="space-y-3">
         <Label>Interface</Label>
+
+        <div className="space-y-1">
+          <span className="text-sm text-muted-foreground">Color Scheme</span>
+          <ThemeSelector />
+        </div>
+
         <label className="flex items-center gap-3 cursor-pointer">
           <input
             type="checkbox"
@@ -233,7 +240,7 @@ export function SettingsDatabaseSection({
           <span className="text-sm">Reopen to last viewed channel/conversation</span>
         </label>
         <p className="text-xs text-muted-foreground">
-          This applies only to this device/browser. It does not sync to server settings.
+          These settings apply only to this device/browser. They do not sync to server settings.
         </p>
       </div>
 

frontend/src/components/settings/ThemeSelector.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { THEMES, getSavedTheme, applyTheme } from '../../utils/theme';
+
+/** 3x2 grid of colored dots previewing a theme's palette. */
+function ThemeSwatch({ colors }: { colors: readonly string[] }) {
+  return (
+    <div className="grid grid-cols-3 gap-[3px]" aria-hidden="true">
+      {colors.map((c, i) => (
+        <div
+          key={i}
+          className="w-3 h-3 rounded-full ring-1 ring-border/40"
+          style={{ backgroundColor: c }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function ThemeSelector() {
+  const [current, setCurrent] = useState(getSavedTheme);
+
+  const handleChange = (themeId: string) => {
+    setCurrent(themeId);
+    applyTheme(themeId);
+  };
+
+  return (
+    <fieldset className="flex flex-wrap gap-2">
+      {THEMES.map((theme) => (
+        <label
+          key={theme.id}
+          className={
+            'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer border transition-colors ' +
+            (current === theme.id
+              ? 'border-primary bg-primary/5'
+              : 'border-transparent hover:bg-accent/50')
+          }
+        >
+          <input
+            type="radio"
+            name="theme"
+            value={theme.id}
+            checked={current === theme.id}
+            onChange={() => handleChange(theme.id)}
+            className="sr-only"
+          />
+          <ThemeSwatch colors={theme.swatches} />
+          <span className="text-xs whitespace-nowrap">{theme.name}</span>
+        </label>
+      ))}
+    </fieldset>
+  );
+}