80 lines
3.2 KiB
Plaintext
80 lines
3.2 KiB
Plaintext
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 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 (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.
|