dark mode

2026-02-23 17:31:06 +01:00
parent fce8b9d4bb
commit e0ef48f6fd
26 changed files with 328 additions and 3714 deletions
--- a/codex-prompt/dark-mode.txt
+++ b/codex-prompt/dark-mode.txt
@@ -0,0 +1,79 @@
+TASK: Aggiungere Dark Mode globale con toggle nel footer (Flowbite + 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 e Flowbite
+- Accessibile (aria-label, stato, focus)
+
+1) Tailwind config
+- Aggiornare tailwind.config.js:
+  - impostare `darkMode: 'class'`
+  - assicurarsi che content includa templates e node_modules/flowbite 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 <html> (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 <head> prima del CSS per evitare FOUC:
+    <script src="/static/vendor/theme.js"></script>
+  - poi link CSS e script htmx/flowbite 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 (Flowbite style)
+- Nel footer del layout aggiungere un bottone:
+  - posizionato a destra (o center se preferisci) con icona (testo va bene senza icone)
+  - classi Flowbite/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 Flowbite JS, 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.