Design system
Dark mode senza un secondo design system
Un tema scuro non è un’inversione di colori. È una seconda mappatura degli stessi token. Ecco come evitare due prodotti, due contrasti e due componenti.
In sintesi
- Dark mode è una mappatura di token, non una palette duplicata.
- Contrasto, immagini e chart sono i tre punti che si rompono per primi.
- Se hai bisogno di due componenti per due temi, il problema è nei token.
La dark mode sembra un cambio di colore. In realtà è un test del design system: se i componenti conoscono i ruoli semantici, il tema cambia da solo; se conoscono i colori, devi duplicare tutto.
Token, non colori
Un componente non deve sapere che il testo è `#f5f5f5`. Deve sapere che è `--ui-fg`. Il tema scuro cambia il valore del token, non il componente. Se una card ha un `background: #111` hard-coded, in light mode resta nera.
| Ruolo | Dark | Light |
|---|---|---|
| Canvas | Quasi nero | Bianco caldo |
| Testo | Bianco | Quasi nero |
| Bordo | Grigio scuro | Grigio chiaro |
| Accent | Blu più luminoso | Blu più profondo |
Contrasto: il test che salta
Il testo secondario è il primo a sparire. Verifica 4.5:1 per il body, 3:1 per il testo grande e per il focus ring. Non usare lo stesso grigio per testo e bordi: sono ruoli diversi.
Immagini e grafici
Un’immagine chiara su fondo scuro può abbagliare. Prevedi un bordo o una superficie dietro. Nei grafici, non invertire la palette: cambia la luminosità delle serie e mantieni il contrasto tra loro.
Il test in tre schermate
- Apri la stessa pagina nei due temi e confronta il testo secondario.
- Passa da tastiera: il focus ring si vede su entrambi?
- Apri un dialog e un toast: le superfici sono distinguibili?
- Guarda un’immagine con parti chiare e scure.
- Controlla il tema di sistema, non solo il toggle.
La specifica completa dei token è in EneUI; il punto di partenza è un layer semantico, non una seconda palette.
Domande frequenti
Dark mode è solo invertire i colori?
No. È una mappatura di ruoli semantici: canvas, surface, testo, bordo, accent. L’inversione produce contrasti sbagliati.
Devo duplicare i componenti?
No. Se i componenti usano token semantici, il tema cambia senza duplicazioni.
Come scelgo il nero di fondo?
Un quasi nero è più leggibile di `#000` e lascia spazio alla gerarchia. Evita il nero puro per grandi superfici.
Le immagini vanno trattate?
Sì. Prevedi un bordo, una superficie o una versione con luminance diversa per le immagini che brillano troppo.
Come testo il tema di sistema?
Cambia l’impostazione del sistema operativo, non solo il toggle del sito, e verifica che la preferenza venga letta al primo paint.