La modalità scura è un secondo design, non un filtro
Invertire i colori produce un tema scuro che funziona ma sembra leggermente sbagliato ovunque. I token semantici risolvono quasi tutto. Ombre e accenti richiedono più attenzione.
- Autore
Bruma- Pubblicato
- Tempo di lettura
- 1 min
- Categoria
- Sistemi di design
Il tema che sembra quasi giusto
Il modo più rapido per avere una modalità scura è scambiare il bianco con il nero e il nero con il bianco. Funziona, nel senso che il testo resta leggibile. Ma sembra anche leggermente sbagliato, in un modo difficile da descrivere: le ombre spariscono, il colore d'accento abbaglia e ogni bordo sembra troppo marcato o del tutto assente.
Questo perché un tema scuro non è il tema chiaro a luci spente. I colori si comportano diversamente su uno sfondo scuro, e alcuni hanno bisogno di decisioni proprie.
Dai un nome ai colori in base al ruolo, non alla tonalità
La correzione che fa gran parte del lavoro è un cambio di vocabolario. Invece di usare white, gray-100 o #1b222d, i componenti usano nomi che descrivono un ruolo: background, card, surface, border, muted-foreground. Ogni tema decide poi che aspetto hanno quei ruoli.
Come un token diventa un colore
- 01Un componente chiede bg-card
- 02Il token punta a --card
- 03Il tema chiaro o scuro definisce --card
- 04Tutte le card si aggiornano insieme
In pratica, un componente scritto una volta non ha mai bisogno di una variante dark: per i suoi colori. Quando il tema cambia, ogni superficie cambia con lui.
Tre cose che i token non risolvono
Sembra tutto il lavoro, ma alcuni dettagli richiedono ancora un occhio umano:
- I colori d'accento hanno bisogno di un valore più chiaro e un po' più caldo in modalità scura, altrimenti abbagliano sullo sfondo
- Le ombre richiedono un'opacità molto più alta, perché un'ombra morbida sparisce su una superficie scura
- Immagini e illustrazioni possono richiedere versioni scure dedicate, perché i token non possono ricolorare una foto
Due design, un solo vocabolario
Il punto non è che la modalità scura richieda il doppio del lavoro. Con i token semantici, gran parte è davvero automatica. È che la parte restante, gli accenti, la profondità, le immagini, merita la stessa attenzione del tema chiaro. Chi sceglie la modalità scura spesso la usa tutto il giorno, e si accorge quando è stata un ripensamento.
Domande frequenti
Trova risposte rapide alle domande piu comuni su questo argomento.
Come impostazione predefinita, sì. Il selettore del tema di UI Vintage parte in modalità automatica e segue il sistema, ma permette di scegliere esplicitamente chiaro o scuro e ricorda la scelta.
Autore
Bruma
