Come aggiungere la modalità scura al tuo sito o alla tua app (senza il lampo bianco)

Per aggiungere la modalità scura, definisci i colori come token con nome (sfondo, testo, superficie, bordo, accento) invece di valori fissi nel codice, assegna a ogni token un valore chiaro e uno scuro, e passa dall'uno all'altro con la funzione multimediale CSS prefers-color-scheme, così il sito segue l'impostazione di sistema del visitatore. Se vuoi anche un interruttore manuale, salva la scelta nel browser e applicala con un piccolo script inline nell'head della pagina, così non c'è un lampo bianco al caricamento. Poi verifica il contrasto, le immagini e i grafici in entrambi i temi. In un app builder basato sull'AI, un prompt chiaro può fare gran parte del lavoro; la verifica è ciò che fa la differenza di qualità.

Due approcci

La maggior parte delle app funziona meglio con il secondo: rispettare il sistema per impostazione predefinita, lasciando però alle persone la possibilità di scegliere diversamente.

Parti dai token di colore

La modalità scura è complicata quando i colori sono sparsi nel codice come white, #333 e gray-100. È facile quando ogni colore arriva da un piccolo insieme di token con nome:

Ogni componente usa i nomi dei token. Cambiare tema significa quindi sostituire un solo insieme di valori, non modificare ogni componente.

Consigli per la tavolozza scura:

• Evita nero puro e bianco puro per le aree ampie; il grigio molto scuro e il bianco sporco sono più leggibili.
• Mostra la profondità con superfici più chiare, non con le ombre — le ombre si vedono appena su sfondi scuri.
• Desatura leggermente i colori brand molto brillanti; su sfondi scuri possono risaltare in modo fastidioso.
• Mantieni il contrasto leggibile. Il livello AA di WCAG chiede almeno 4,5:1 di contrasto per il testo normale. Il testo grigio attenuato spesso non lo rispetta nei temi scuri.

Con Tailwind CSS

Tailwind è lo strumento di stile predefinito in molte app create con l'AI. Secondo la documentazione di Tailwind sulla modalità scura, la variante dark: usa prefers-color-scheme per impostazione predefinita, quindi classi come bg-white dark:bg-gray-900 seguono l'impostazione di sistema senza lavoro aggiuntivo.

Per un interruttore manuale in Tailwind v4, la documentazione mostra come passare la variante a una classe su un elemento padre:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Poi l'app aggiunge o rimuove la classe dark sull'elemento radice. La documentazione suggerisce anche uno script inline nell'head che applica la scelta salvata (o l'impostazione di sistema) prima che la pagina venga disegnata — ed è esattamente così che si evita il lampo.

Evitare il lampo bianco

Il lampo accade perché la pagina viene disegnata in modalità chiara, poi JavaScript si carica, legge la scelta salvata e passa a quella scura. La soluzione:

1. Inserisci un piccolo script inline nell'head della pagina che legge il tema salvato e imposta la classe sull'elemento radice prima che si mostri qualsiasi cosa.
2. Imposta la proprietà CSS color-scheme per ciascun tema, così le parti disegnate dal browser (barre di scorrimento, controlli dei moduli) corrispondono.
3. Dai alla pagina uno sfondo esplicito in entrambi i temi.
4. Se l'app è renderizzata dal server, assicurati che server e browser concordino sul tema iniziale, altrimenti la pagina può ridisegnarsi e sfarfallare.

Esempi di prompt

Una configurazione completa:

Aggiungi la modalità scura. Prima sostituisci i colori fissi nel codice con token di tema (sfondo, superficie, testo, testo attenuato, bordo, accento) con valori chiari e scuri. Per impostazione predefinita usa l'impostazione di sistema del visitatore. Aggiungi nell'header un selettore del tema con le opzioni Chiaro, Scuro e Sistema, ricorda la scelta in localStorage e applicala con uno script inline nell'head così non c'è un lampo bianco al caricamento. Imposta color-scheme per ciascun tema. Mantieni esattamente com'è il design chiaro attuale.

Sistemare ciò che resta:

Controlla ogni pagina in modalità scura e correggi: testo con basso contrasto (punta ad almeno 4,5:1), sfondi bianchi fissi, bordi che scompaiono, grafici con testo scuro su sfondi scuri e loghi che spariscono. Non modificare il tema chiaro.

Immagini e grafici:

Usa una versione chiara del logo in modalità scura. Fai in modo che assi, linee della griglia ed etichette dei grafici usino i token del tema. Dai agli screenshot un bordo sottile in modalità scura così non si confondono con lo sfondo.

Passo dopo passo

1. Fai un audit dei colori. Trova i colori fissi e sostituiscili con token. È la maggior parte del lavoro.
2. Definisci i valori scuri per ciascun token.
3. Segui il sistema con prefers-color-scheme (o con il dark: predefinito di Tailwind).
4. Aggiungi un interruttore se ne vuoi uno: Chiaro, Scuro, Sistema. Salva la scelta nel browser; per le app con login puoi anche salvarla nel profilo dell'utente.
5. Evita il lampo con lo script inline nell'head e con color-scheme.
6. Controlla le parti delicate: loghi, icone, immagini con sfondi bianchi, grafici, blocchi di codice, mappe, incorporamenti, email.
7. Verifica entrambi i temi su desktop e smartphone, con il sistema impostato su chiaro e su scuro, e dopo un refresh forzato.

Errori comuni

• Invertire tutto. Un filtro che inverte i colori rovina foto e colori del brand.
• Colori fissi dimenticati. Una sola card bianca in una pagina scura si nota subito.
• Testo grigio a basso contrasto. Sembra elegante, ma non è leggibile.
• Lampo bianco al caricamento. Particolarmente visibile sugli smartphone di notte.
• Dimenticare gli incorporamenti di terze parti. Mappe, video e widget possono restare chiari; verifica se hanno un'opzione scura.
• Un interruttore con solo due stati. Una volta cliccato, la persona non può tornare a seguire il sistema.
• Rompere il tema chiaro. Scrivi esplicitamente nel prompt che il design chiaro deve restare com'è.

Checklist

• Tutti i colori provengono dai token del tema
• Segue l'impostazione di sistema per impostazione predefinita
• Interruttore opzionale con Chiaro, Scuro e Sistema, ricordato
• Nessun lampo bianco al caricamento o al refresh
• color-scheme impostato così controlli dei moduli e barre di scorrimento corrispondono
• Contrasto del testo di almeno 4,5:1 in entrambi i temi
• Loghi, immagini, grafici e incorporamenti verificati in modalità scura
• Tema chiaro invariato
• Verificato su desktop e smartphone

Modalità scura con Mythex

Le app costruite su Mythex usano per impostazione predefinita Vite, React, TypeScript e Tailwind, quindi l'approccio Tailwind qui sopra si applica direttamente: incolla il prompt di configurazione completa in chat, poi verifica l'Anteprima in entrambi i temi e alla dimensione dello smartphone. Il consiglio di Mythex per i prompt di design è indicare cosa cambiare e cosa mantenere, e qui conta: scrivi che il tema chiaro deve restare com'è. Vedi Prompt per design e UI, e torna indietro con un checkpoint se un passaggio va storto.

Per saperne di più su come ottenere l'aspetto giusto, vedi come progettare un'app dall'aspetto curato con l'AI e come scrivere prompt per gli app builder AI.

Domande