feat(themes): Added custom theme support.

src/components/theme/Switcher.tsx

@@ -1,59 +1,76 @@
 'use client';
-import { useTheme } from 'next-themes';
-import { useCallback, useEffect, useState } from 'react';
-import Select from '../ui/Select';
+import { useEffect, useState } from 'react';
 
-type Theme = 'dark' | 'light' | 'system';
+type Theme = 'dark' | 'light' | 'custom';
 
 const ThemeSwitcher = ({ className }: { className?: string }) => {
   const [mounted, setMounted] = useState(false);
-
-  const { theme, setTheme } = useTheme();
-
-  const isTheme = useCallback((t: Theme) => t === theme, [theme]);
-
-  const handleThemeSwitch = (theme: Theme) => {
-    setTheme(theme);
-  };
+  const [theme, setTheme] = useState<Theme>('dark');
+  const [bg, setBg] = useState<string>('');
+  const [accent, setAccent] = useState<string>('');
 
   useEffect(() => {
     setMounted(true);
+    const t = (localStorage.getItem('appTheme') as Theme) || 'dark';
+    const b = localStorage.getItem('userBg') || '#0f0f0f';
+    const a = localStorage.getItem('userAccent') || '#2563eb';
+    setTheme(t);
+    setBg(b);
+    setAccent(a);
   }, []);
 
-  useEffect(() => {
-    if (isTheme('system')) {
-      const preferDarkScheme = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      );
-
-      const detectThemeChange = (event: MediaQueryListEvent) => {
-        const theme: Theme = event.matches ? 'dark' : 'light';
-        setTheme(theme);
-      };
-
-      preferDarkScheme.addEventListener('change', detectThemeChange);
-
-      return () => {
-        preferDarkScheme.removeEventListener('change', detectThemeChange);
-      };
+  const apply = (next: Theme, nextBg = bg, nextAccent = accent) => {
+    (window as any).__setAppTheme?.(next, nextBg, nextAccent);
+    setTheme(next);
+    if (next === 'light' || next === 'dark') {
+      // Refresh local color inputs from storage so UI shows current defaults
+      const b = localStorage.getItem('userBg') || '#0f0f0f';
+      const a = localStorage.getItem('userAccent') || '#2563eb';
+      setBg(b);
+      setAccent(a);
     }
-  }, [isTheme, setTheme, theme]);
+  };
 
-  // Avoid Hydration Mismatch
-  if (!mounted) {
-    return null;
-  }
+  if (!mounted) return null;
 
   return (
-    <Select
-      className={className}
-      value={theme}
-      onChange={(e) => handleThemeSwitch(e.target.value as Theme)}
-      options={[
-        { value: 'light', label: 'Light' },
-        { value: 'dark', label: 'Dark' },
-      ]}
-    />
+    <div className={className}>
+      <div className="flex gap-2">
+        <select
+          className="bg-surface text-fg px-3 py-2 rounded-lg border border-surface-2 text-sm"
+          value={theme}
+          onChange={(e) => apply(e.target.value as Theme)}
+        >
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+          <option value="custom">Custom</option>
+        </select>
+        {theme === 'custom' && (
+          <div className="flex items-center gap-2">
+            <label className="text-xs text-foreground/70">Background</label>
+            <input
+              type="color"
+              value={bg}
+              onChange={(e) => {
+                const v = e.target.value;
+                setBg(v);
+                apply('custom', v, accent);
+              }}
+            />
+            <label className="text-xs text-foreground/70">Accent</label>
+            <input
+              type="color"
+              value={accent}
+              onChange={(e) => {
+                const v = e.target.value;
+                setAccent(v);
+                apply('custom', bg, v);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
   );
 };