La Dark Mode è la funzionalità dei sistemi operativi Android e iOS che consente di avere un’interfaccia scura per le app più usate, come WhatsApp, Instagram e Facebook e il browser Google Chrome. La modalità scura permette di risparmiare la batteria del cellulare o del PC portatile e di affaticare meno gli occhi, soprattutto nelle ore serali.
Se sei uno sviluppatore web, puoi implementare la Dark Mode all’interno di un sito web per consentire all’utente di impostarla dal suo cellulare o computer. In questo articolo vedremo come realizzarla step by step, utilizzando uno dei linguaggi più usati, i CSS.
Per iniziare, crea le cartelle e i file utili alla realizzazione del tuo progetto web: la cartella CSS, img, i file style.css e index.html. Poi scarica da Internet due immagini di larghezza 400 pixel e altezza 330 pixel.
A questo punto, inserisci il seguente codice nel file index.html:
Come puoi vedere, hai appena inserito dei font Google e il codice che permette di utilizzare le icone di Font Awesome nel tuo progetto web. All’interno del body, hai creato un tag input che consente di passare dalla Light Mode alla Dark Mode, e viceversa. Subito dopo trovi il tag main che conterrà tutto il codice della pagina. Apri ora il file style.css e scrivi questo codice:
Se apri il documento index.html sul browser dovresti vedere un risultato simile a questo:
Ora che hai impostato la formattazione di base del progetto, attraverso il CSS puoi inserire una media query in grado di rilevare se la modalità scura è attiva nel dispositivo dell’utente, aggiungendo questo codice:
Sela Dark Mode è attiva, la media query attiverà tutte le regole CSS inserite al suo interno, mostrando automaticamente la pagina con i colori scuri. Se invece tale modalità è disattivata, la media query non verrà abilitata.
Adesso inserisci all’interno delle parentesi graffe il codice che desideri venga attivato dal browser quando è in funzione la modalità notturna:
Queste poche e semplici regole faranno in modo che la pagina web cambi completamente aspetto se la Dark Mode è attiva nel PC o nel cellulare dell’utente.
Impostazione del bottone per attivare la Dark Mode
Ora andrai a formattare il tag input e il tag label presenti all’interno del file index.html, per permettere agli utenti di passare con un semplice clic dalla Dark Mode alla Light Mode e viceversa. Scrivi il codice evidenziato in rosso nell’immagine seguente subito prima della media query appena inserita:
Adesso aggiungi il codice evidenziato qui sotto nella media query che attiva la Dark Mode:
Il pulsante che hai creato permetterà agli utenti di selezionare la modalità chiara o scura ogni volta che lo desiderano, proprio come in questo esempio. Missione compiuta!
