# 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.

> Pagina: https://ui.eneawork.it/blog/tailwind-dark-mode-strategie
> Markdown: https://ui.eneawork.it/blog/tailwind-dark-mode-strategie.md

*2026-11-01*

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.

La domanda «How do I detect dark mode using JavaScript?» vale 430 voti su Stack Overflow, letta il 31 ottobre 2026 con la Stack Exchange API e registrata in docs/keyword-data.json. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati e letti da /api/stats il 1 novembre 2026. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

## 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

## 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.

## FAQ

### 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.