From 4abee458779f6fec218c41cb974f50c89610fc55 Mon Sep 17 00:00:00 2001
From: Arnaud Nelissen <arnaud.nelissen@icloud.com>
Date: Thu, 25 Jun 2026 23:45:40 +0200
Subject: [PATCH] fix(diaper): use dark-mode-aware backgrounds for stool color
 picker

Light pastel bg colors were unreadable on dark backgrounds. Add darkBg
variants for each stool color and a MutationObserver-based isDark hook
to switch between them at runtime.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/event-modal.tsx | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/event-modal.tsx b/src/components/event-modal.tsx
index 33f3a5b..7ca88b2 100644
--- a/src/components/event-modal.tsx
+++ b/src/components/event-modal.tsx
@@ -69,12 +69,12 @@ interface MilkStock {
 }
 
 const STOOL_COLORS = [
-  { value: "jaune", label: "Jaune", bg: "#fef3c7", dot: "#f59e0b" },
-  { value: "vert", label: "Vert", bg: "#d1fae5", dot: "#10b981" },
-  { value: "marron", label: "Marron", bg: "#fef3c7", dot: "#92400e" },
-  { value: "orange", label: "Orange", bg: "#ffedd5", dot: "#f97316" },
-  { value: "noir", label: "Méconium", bg: "#f1f5f9", dot: "#1e293b" },
-  { value: "rouge", label: "Rouge", bg: "#fee2e2", dot: "#ef4444" },
+  { value: "jaune", label: "Jaune", bg: "#fef3c7", darkBg: "#451a03", dot: "#f59e0b" },
+  { value: "vert", label: "Vert", bg: "#d1fae5", darkBg: "#022c22", dot: "#10b981" },
+  { value: "marron", label: "Marron", bg: "#fef3c7", darkBg: "#1c0a00", dot: "#92400e" },
+  { value: "orange", label: "Orange", bg: "#ffedd5", darkBg: "#431407", dot: "#f97316" },
+  { value: "noir", label: "Méconium", bg: "#f1f5f9", darkBg: "#0f172a", dot: "#1e293b" },
+  { value: "rouge", label: "Rouge", bg: "#fee2e2", darkBg: "#450a0a", dot: "#ef4444" },
 ];
 
 function localNowString() {
@@ -139,6 +139,14 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
   // Milk stock state (BOTTLE type)
   const [milkStocks, setMilkStocks] = useState<MilkStock[]>([]);
   const [selectedStockId, setSelectedStockId] = useState<string | null>(null);
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    const check = () => setIsDark(document.documentElement.classList.contains("dark"));
+    check();
+    const obs = new MutationObserver(check);
+    obs.observe(document.documentElement, { attributeFilter: ["class"] });
+    return () => obs.disconnect();
+  }, []);
 
   // Combined diaper toggle
   const [diaperBoth, setDiaperBoth] = useState(false);
@@ -633,11 +641,11 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
               <div>
                 <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">Couleur</label>
                 <div className="grid grid-cols-3 gap-2">
-                  {STOOL_COLORS.map(({ value, label, bg, dot }) => (
+                  {STOOL_COLORS.map(({ value, label, bg, darkBg, dot }) => (
                     <button key={value} type="button" onClick={() => setForm((f) => ({ ...f, stoolColor: value }))}
                       className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-xs font-medium transition ${
                         form.stoolColor === value ? "border-indigo-500 ring-1 ring-indigo-300" : "border-slate-200 dark:border-slate-600 hover:border-slate-300"
-                      }`} style={{ background: bg }}>
+                      }`} style={{ background: isDark ? darkBg : bg }}>
                       <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: dot }} />
                       {label}
                     </button>
@@ -676,11 +684,11 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
                   <div>
                     <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">Couleur des selles</label>
                     <div className="grid grid-cols-3 gap-2">
-                      {STOOL_COLORS.map(({ value, label, bg, dot }) => (
+                      {STOOL_COLORS.map(({ value, label, bg, darkBg, dot }) => (
                         <button key={value} type="button" onClick={() => setForm((f) => ({ ...f, stoolColor: value }))}
                           className={`flex items-center gap-2 px-2.5 py-2 rounded-lg border text-xs font-medium text-slate-800 transition ${
                             form.stoolColor === value ? "border-indigo-500 ring-1 ring-indigo-300" : "border-slate-200 dark:border-slate-600 hover:border-slate-300"
-                          }`} style={{ background: bg }}>
+                          }`} style={{ background: isDark ? darkBg : bg }}>
                           <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: dot }} />
                           {label}
                         </button>