From 3faa74640db63524d3ae6eb5aa789e6ea93f6b4a Mon Sep 17 00:00:00 2001
From: yann64 <yannickbarbel@orange.fr>
Date: Thu, 4 Jun 2026 20:14:44 +0200
Subject: [PATCH] Fix dark mode : formulaires et composant lieu-picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- app.css : règle @layer base globale pour tous les <input>, <select>,
  <textarea> en mode sombre (bg-gray-700, border-gray-600, text-gray-100)
  sans toucher checkboxes, radios ni boutons
- lieu-picker : bouton déclencheur, fenêtre modale, champ de recherche,
  liste de résultats et badges entièrement adaptés au thème sombre

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/css/app.css                         | 27 ++++++++
 .../views/components/lieu-picker.blade.php    | 63 ++++++++++++-------
 2 files changed, 66 insertions(+), 24 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index de7488b..0874e87 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -3,3 +3,30 @@
 @tailwind utilities;
 
 [x-cloak] { display: none !important; }
+
+@layer base {
+    /*
+     * Dark mode — champs de formulaire
+     * Appliqué globalement pour couvrir tous les <input>, <select>, <textarea>
+     * bruts qui n'utilisent pas le composant <x-text-input>.
+     * La spécificité (.dark + élément) surpasse les resets de @tailwindcss/forms.
+     */
+    .dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]),
+    .dark select,
+    .dark textarea {
+        background-color: theme('colors.gray.700');
+        border-color: theme('colors.gray.600');
+        color: theme('colors.gray.100');
+    }
+
+    .dark input::placeholder,
+    .dark textarea::placeholder {
+        color: theme('colors.gray.400');
+    }
+
+    /* Options du <select> natif (fond navigateur) */
+    .dark select option {
+        background-color: theme('colors.gray.700');
+        color: theme('colors.gray.100');
+    }
+}
diff --git a/resources/views/components/lieu-picker.blade.php b/resources/views/components/lieu-picker.blade.php
index 5f4c156..ceb4607 100644
--- a/resources/views/components/lieu-picker.blade.php
+++ b/resources/views/components/lieu-picker.blade.php
@@ -69,7 +69,7 @@
     }"
     @keydown.escape.window="open = false"
 >
-    <label class="block text-sm font-medium text-gray-700 mb-1">
+    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
         {{ $label }}
         @if($required) <span class="text-red-500">*</span> @endif
     </label>
@@ -82,12 +82,17 @@
         <button
             type="button"
             @click="openModal()"
-            class="flex-1 text-left px-3 py-2 border border-gray-300 rounded-md bg-white text-sm shadow-sm
-                   hover:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors
+            class="flex-1 text-left px-3 py-2 border border-gray-300 dark:border-gray-600
+                   rounded-md bg-white dark:bg-gray-700 text-sm shadow-sm
+                   hover:border-indigo-400 dark:hover:border-indigo-500
+                   focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors
                    @error($name) border-red-500 @enderror"
         >
-            <span x-show="selected.id" class="text-gray-900" x-text="selected.name"></span>
-            <span x-show="!selected.id" class="text-gray-400">{{ $placeholder }}</span>
+            <span x-show="selected.id"
+                  class="text-gray-900 dark:text-gray-100"
+                  x-text="selected.name"></span>
+            <span x-show="!selected.id"
+                  class="text-gray-400 dark:text-gray-500">{{ $placeholder }}</span>
         </button>
 
         <button
@@ -95,7 +100,7 @@
             x-show="selected.id"
             @click="clear()"
             title="Effacer"
-            class="px-2 py-2 text-gray-400 hover:text-red-500 transition-colors"
+            class="px-2 py-2 text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition-colors"
         >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
@@ -104,7 +109,7 @@
     </div>
 
     @error($name)
-        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
+        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
     @enderror
 
     {{-- Modale de recherche --}}
@@ -115,13 +120,15 @@
         @click.self="open = false"
     >
         {{-- Fond semi-transparent --}}
-        <div class="absolute inset-0 bg-black/40" @click="open = false"></div>
+        <div class="absolute inset-0 bg-black/40 dark:bg-black/60" @click="open = false"></div>
 
         {{-- Panneau --}}
-        <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-lg z-10 overflow-hidden">
-            {{-- En-tête --}}
-            <div class="px-4 py-3 border-b border-gray-100 flex items-center gap-3">
-                <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl dark:shadow-gray-900/50
+                    w-full max-w-lg z-10 overflow-hidden">
+
+            {{-- En-tête avec champ de recherche --}}
+            <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center gap-3">
+                <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                           d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
                 </svg>
@@ -131,10 +138,13 @@
                     x-model="search"
                     @input="onSearchInput()"
                     placeholder="Nom, code INSEE…"
-                    class="flex-1 text-sm outline-none placeholder-gray-400"
+                    class="flex-1 text-sm outline-none bg-transparent
+                           text-gray-900 dark:text-gray-100
+                           placeholder-gray-400 dark:placeholder-gray-500
+                           focus:ring-0 border-none p-0"
                 >
                 <button type="button" @click="open = false"
-                        class="text-gray-400 hover:text-gray-600">
+                        class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                     </svg>
@@ -144,39 +154,44 @@
             {{-- Résultats --}}
             <div class="max-h-80 overflow-y-auto">
                 {{-- Chargement --}}
-                <div x-show="loading" class="px-4 py-6 text-center text-sm text-gray-400">
+                <div x-show="loading"
+                     class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
                     Recherche…
                 </div>
 
                 {{-- Aucun résultat --}}
                 <div x-show="!loading && search.length > 0 && results.length === 0"
-                     class="px-4 py-6 text-center text-sm text-gray-400">
+                     class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
                     Aucun lieu trouvé pour « <span x-text="search"></span> »
                 </div>
 
                 {{-- Invite initiale --}}
                 <div x-show="!loading && search.length === 0"
-                     class="px-4 py-6 text-center text-sm text-gray-400">
+                     class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
                     Saisissez au moins une lettre pour rechercher
                 </div>
 
-                {{-- Liste --}}
+                {{-- Liste des résultats --}}
                 <ul x-show="results.length > 0">
                     <template x-for="lieu in results" :key="lieu.id">
                         <li>
                             <button
                                 type="button"
                                 @click="select(lieu)"
-                                class="w-full text-left px-4 py-3 hover:bg-indigo-50 flex items-center justify-between gap-3 transition-colors"
+                                class="w-full text-left px-4 py-3 flex items-center justify-between gap-3 transition-colors
+                                       hover:bg-indigo-50 dark:hover:bg-indigo-900/30"
                             >
                                 <div>
-                                    <span class="text-sm font-medium text-gray-900" x-text="lieu.nom_long"></span>
+                                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
+                                          x-text="lieu.nom_long"></span>
                                     <span x-show="lieu.code"
-                                          class="ml-2 text-xs text-gray-400"
+                                          class="ml-2 text-xs text-gray-400 dark:text-gray-500"
                                           x-text="lieu.code"></span>
                                 </div>
                                 <span x-show="lieu.type"
-                                      class="shrink-0 text-xs px-2 py-0.5 bg-gray-100 text-gray-500 rounded-full"
+                                      class="shrink-0 text-xs px-2 py-0.5 rounded-full
+                                             bg-gray-100 dark:bg-gray-700
+                                             text-gray-500 dark:text-gray-400"
                                       x-text="lieu.type"></span>
                             </button>
                         </li>
@@ -186,9 +201,9 @@
 
             @can('create', App\Models\Lieu::class)
             {{-- Pied : créer un nouveau lieu --}}
-            <div class="border-t border-gray-100 px-4 py-2.5">
+            <div class="border-t border-gray-100 dark:border-gray-700 px-4 py-2.5">
                 <a href="{{ route('lieux.create') }}" target="_blank"
-                   class="text-xs text-indigo-600 hover:underline">
+                   class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">
                     + Créer un nouveau lieu
                 </a>
             </div>