TASK: Aggiungere Dark Mode globale con toggle nel footer (Tailwind). Vincoli: - Usare Tailwind dark mode con strategia "class" (non media) - Toggle nel footer visibile su tutte le pagine (layout globale) - Stato persistente con localStorage - Default: se non c’è preferenza salvata, usare prefers-color-scheme - Nessun framework JS aggiuntivo - Non rompere HTMX - Accessibile (aria-label, stato, focus) 1) Tailwind config - Aggiornare tailwind.config.js: - impostare `darkMode: 'class'` - assicurarsi che content includa templates e script statici come già configurato 2) JS globale - Creare file /web/static/vendor/theme.js (o /web/static/js/theme.js se preferisci) con: - all’avvio (prima del render visibile): - leggere localStorage key `theme` ('dark'|'light') - se non presente, leggere `window.matchMedia('(prefers-color-scheme: dark)')` - applicare/rimuovere classe `dark` su (document.documentElement) - esporre funzione toggleTheme() che: - toggla classe `dark` - salva preferenza in localStorage - aggiorna label testo del bottone e aria-pressed - gestire aggiornamento se l’utente non ha preferenza salvata e cambia prefers-color-scheme (listener matchMedia), opzionale ma gradito 3) Includere theme.js nel layout - In /web/templates/layout.html: - includere theme.js nel prima del CSS per evitare FOUC: - poi link CSS e script frontend come già presenti - aggiungere classi base al body per dark: - bg-white dark:bg-gray-900 - text-gray-900 dark:text-gray-100 - min-h-screen flex flex-col - contenuto in main con flex-1 4) Footer + toggle button (Tailwind style) - Nel footer del layout aggiungere un bottone: - posizionato a destra (o center se preferisci) con icona (testo va bene senza icone) - classi Tailwind: - px-3 py-2 text-sm font-medium rounded-lg - bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 - attributi accessibilità: - id="themeToggle" - type="button" - aria-label="Toggle dark mode" - aria-pressed="false" (aggiornato via JS) - testo dinamico: "Dark mode" / "Light mode" o "Tema: Scuro/Chiaro" - Aggiungere onclick: - onclick="window.toggleTheme && window.toggleTheme()" 5) Aggiornare componenti base per dark - Aggiornare /web/templates/components/navbar.html (se esiste) e altri partial principali con classi dark: - Navbar: bg-white dark:bg-gray-900, border-gray-200 dark:border-gray-700 - Dropdown: bg-white dark:bg-gray-800, text colors - Cards: bg-white dark:bg-gray-800 - Tables: dark divide colors Non serve perfezione totale, ma assicurare leggibilità. 6) README - Aggiornare README con nota: - dark mode persistente in localStorage key "theme" 7) Criteri di accettazione - Il toggle è visibile nel footer su tutte le pagine - Il tema persiste al reload - Default segue prefers-color-scheme se non impostato manualmente - Nessun flash di tema sbagliato (FOUC minimizzato) - Non rompe modals, dropdown e HTMX - Accessibile: bottone focusable e aria-pressed aggiornato Esegui: - make tw-build (o make tw-watch per verificare) - Avvia server e verifica cambio tema su /login e /users. Correggi eventuali classi mancanti.