theming

2026-02-17 10:06:53 +00:00
parent 4cdd257735
commit 13e8866875
54 changed files with 2537 additions and 76 deletions
@@ -0,0 +1,31 @@
+import { useSettings } from '@/state/useSettings';
+import { themes } from 'themes';
+
+export const Appearance = () => {
+  const { settings, saveSettings } = useSettings();
+
+  const handleColorThemeChange = (colorTheme: string) => {
+    saveSettings({ ...settings, appearance: { ...settings.appearance, colorTheme } });
+  };
+
+  const activeColorTheme = settings.appearance.colorTheme ?? 'DuckPond';
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 pt-2">
+      {themes.map((t) => (
+        <button
+          key={t.id}
+          type="button"
+          onClick={() => handleColorThemeChange(t.id)}
+          className={`rounded-md px-3 py-2.5 text-sm font-medium cursor-pointer transition-colors ${
+            activeColorTheme === t.id
+              ? 'bg-duck-teal text-white ring-2 ring-duck-teal/50'
+              : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+          }`}
+        >
+          {t.name}
+        </button>
+      ))}
+    </div>
+  );
+};