# Dark mode without a second design system

A dark theme is not a colour inversion. It is a second mapping of the same tokens. Here is how to avoid two products and two sets of components.

> Page: https://ui.eneawork.it/blog/dark-mode-senza-secondo-design-system
> Markdown: https://ui.eneawork.it/blog/dark-mode-senza-secondo-design-system.md

*2026-10-31*

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.

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

La specifica completa dei token è in EneUI; il punto di partenza è un layer semantico, non una seconda palette.

## FAQ

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