From 317096499c4fe0bb6915d91be0a88c6834d853b2 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Fri, 13 Feb 2026 08:36:12 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20theme=20switcher=20click=20handling=20?=
 =?UTF-8?q?=E2=80=94=20prevent=20click-outside=20from=20swallowing=20butto?=
 =?UTF-8?q?n=20clicks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ThemeSwitcher.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index 0f59d1c..afb2ba5 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -29,12 +29,16 @@ export function ThemeSwitcher() {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (!open) return;
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
     };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, []);
+    // Use click (not mousedown) so button onClick fires first
+    document.addEventListener('click', handler, true);
+    return () => document.removeEventListener('click', handler, true);
+  }, [open]);
 
   return (
     <div ref={ref} className="relative">
@@ -57,7 +61,8 @@ export function ThemeSwitcher() {
               return (
                 <button
                   key={opt.value}
-                  onClick={() => setTheme(opt.value)}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={() => { setTheme(opt.value); }}
                   className={`flex-1 flex flex-col items-center gap-1 py-2 rounded-xl border text-xs transition-all ${
                     active
                       ? 'border-[var(--pc-accent)]/40 bg-[var(--pc-accent)]/10 text-[var(--pc-accent-light)]'
@@ -77,6 +82,7 @@ export function ThemeSwitcher() {
             {accentOptions.map(opt => (
               <button
                 key={opt.value}
+                onMouseDown={(e) => e.stopPropagation()}
                 onClick={() => setAccent(opt.value)}
                 className="relative h-7 w-7 rounded-full border-2 transition-all flex items-center justify-center"
                 style={{