Pulsante modalità scura per il sito

Pulsante modalità scura per il sito: a cosa serve

La modalità scura è diventata lo standard sui cellulari e molti si aspettano che i siti la seguano. Questo generatore costruisce il tema chiaro e scuro con variabili CSS e prefers-color-scheme, in modo che il sito segua il sistema da solo, più un pulsante per scegliere un altro tema solo sul tuo sito.

Il codice è in tre parti: una riga per l’head che applica la scelta salvata prima che la pagina compaia (senza il flash del tema sbagliato), il CSS con color-scheme perché campi e barre di scorrimento si adattino, e il pulsante con aria-pressed e icone di sole e luna.

Come si usa

1. Scegli i colori del tema chiaro e di quello scuro.
2. Prova il pulsante nell’anteprima.
3. Incolla la riga nell’head, il CSS e il pulsante al posto giusto.

Quando usarlo

• Blog e siti di contenuti.
• Sistemi e pannelli.
• Portfolio di sviluppatori.

Domande frequenti

Come evitare il flash del tema chiaro al caricamento?

Lo script che legge la scelta salvata deve girare nell’head, prima che la pagina compaia. Il codice è diviso in due parti: una riga per l’head e il pulsante per il corpo della pagina.

Cosa fa il color-scheme?

Avvisa il browser se la pagina è chiara o scura, così regola anche barre di scorrimento, campi dei moduli e sfondo predefinito. Senza, la modalità scura ha campi bianchi stonati.

Serve un pulsante se il sito segue già il sistema?

Non è obbligatorio: con il solo prefers-color-scheme il sito segue già il tema del cellulare o del computer. Il pulsante è utile a chi vuole un tema diverso da quello del sistema solo sul tuo sito.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili