Sviluppo web
Le tre strategie di dark mode
Il dark mode in Tailwind ha tre strategie: media query di sistema, classe sull'html o attributo data-theme. Ognuna decide chi comanda il tema e quanto costa.
In sintesi
- Di default dark: segue prefers-color-scheme, senza JavaScript.
- La classe sull'html basta per un interruttore a due stati.
- data-theme serve quando il tema arriva dal server.
Tailwind CSS offre tre strategie di dark mode: media query di sistema, classe sul html, attributo data-theme. Cambiano chi decide il tema e quanto JavaScript serve.
1. Sistema: nessun JavaScript
È il comportamento predefinito di dark:: genera una @media (prefers-color-scheme: dark). Il sito segue il sistema operativo e non ricorda una scelta.
Testo leggibile in entrambi i temi.
2. Classe sul documento
Per un interruttore a due stati sovrascrivi la variante con @custom-variant:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));Poi aggiungi o togli dark su html. La variante usa :where(), quindi la specificità resta a zero e le utility normali continuano a vincere.
3. Attributo data-theme
@import "tailwindcss";
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));Con data-theme puoi aggiungere un terzo stato, system, e leggere il valore anche dal server. Il markup porta la decisione: <html data-theme="dark">.
Quale scegliere
| Strategia | Chi decide | Serve JavaScript | Quando usarla |
|---|---|---|---|
| Media query | Sistema operativo | No | Sito senza interruttore |
| Classe | Interruttore nel browser | Sì | Due stati con preferenza salvata |
| data-theme | Server o browser | Sì, per cambiarla | Tema per utente o reso dal server |
La limitazione
Il tema salvato viene letto dopo il primo paint: il browser mostra il chiaro per un frame e poi lo scuro. Lo script va messo inline nell'head, prima del resto. Se la preferenza sta nel database, il server deve rendere class o data-theme nella prima risposta, altrimenti il flash resta.
Dove continuare
Nel catalogo: gli interruttori di tema, i componenti Tailwind e il blocco dashboard-analytics di bag/ui, con barra laterale scura. Il flash è spiegato in dark mode senza flash, il secondo design system in dark mode senza secondo design system; il confronto tra approcci CSS è in Tailwind contro CSS Modules.
Domande frequenti
Qual è la strategia di dark mode predefinita in Tailwind?
La media query prefers-color-scheme. La variante dark segue il sistema operativo finché non la sovrascrivi con @custom-variant.
Meglio la classe o l'attributo data-theme?
La classe è più corta e basta per due stati. data-theme conviene quando il tema arriva dal server o quando serve un terzo stato system oltre a chiaro e scuro.
Come si evita il flash del tema sbagliato?
Con uno script inline nell'head che imposta classe o attributo prima del primo paint. Se il tema è nel database, il server deve renderizzarlo nella prima risposta.
Il dark mode peggiora l'accessibilità?
Può peggiorarla se il contrasto viene verificato solo nel tema chiaro. Un grigio scuro su nero resta illeggibile anche quando il tema funziona.
Serve un secondo design system per il tema scuro?
No, bastano gli stessi token con valori diversi. Un secondo set di componenti raddoppia la manutenzione e crea divergenze difficili da chiudere.