Nel seguente post, scoprirai come integrare una funzione JavaScript per rilevare l’attivazione del tema scuro dei dispositivi così da far cambiare il tema del tuo sito web in automatico.
In questa guida è mostrata un’alternativa al più comune metodo CSS per il rilevamento del tema scuro e chiaro.
I dispositivi desktop e mobile contemporanei, integrano numerose funzionalità utili per migliorare l’esperienza d’uso degli utenti. Tra quelle più curiose troviamo sicuramente quella della gestione del tema, che implementa una versione con colori a tonalità scura, oltre che a quella di default (chiara).
Possiamo vedere e testare questa funzione sui sistemi operativi desktop come Windows 10, oppure su quelli mobili con Android e iOS.
Con il tema scuro cambia anche il comportamento delle app e programmi esterni, che a loro volta cambieranno il tema per adattarsi alla preferenza dell’utente. Non tutti sanno però, che per gli sviluppatori di siti web è possibile fare in modo che anche questi si comportino in una determinata maniera con l’attivazione del tema scuro. Infatti con una semplice funzione è possibile far cambiare in automatico i colori delle pagine web.
In genere questo è possibile direttamente agendo con il CSS, abbiamo già visto come fare in questo articolo.
Ci sono però mezzi alternativi per ottenere lo stesso risultato, nel caso non sia possibile procedere con CSS o sorgano problemi con questo.
Sto parlando di utilizzare JavaScript per il cambio del tema automatico alla versione scura. Vediamo come si possa integrare questa funzionalità con poche righe di codice JS.
Con JavaScript è possibile modificare ogni singolo aspetto di un sito web o integrare facilmente funzioni e caratteristiche dinamiche. Anche in questo caso viene in nostro soccorso per identificare il tema scuro o chiaro in base alle preferenze dell’utente sul dispositivo in uso.
Con JS, come con il CSS possiamo far cambiare i colori degli elementi in automatico, al caricamento della pagina web, mantenendo le impostazioni predefinite in caso di tema chiaro o cambiandole in caso di tema scuro (o anche detto “dark”).
La stringa di codice che ci interessa è questa qui in basso:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
cambio-tema();
}Se leggi attentamente lo script, vedrai come, nel caso la preferenza del tema corrispondi a quella impostata nel browser, questa eseguirà una funzione specifica (chiamata cambio-tema).
Ogni volta che verrà caricata la pagina web, il browser eseguirà lo script per rilevare il tema scuro del dispositivo, cambiando così di conseguenza lo stile.
La funzione cambio-tema() dovrà essere creata separatamente. In questa funzione JavaScript saranno contenute tutte le istruzioni CSS da sovrascrivere a quelle di default.
Leggi come creare una funzione JavaScript.
Se hai bisogno di ottenere l’effetto contrario (da tema scuro a tema chiaro) ti basta sostituire il valore “dark” con “light” nella prima riga dello script.
Per integrarlo nel tuo sito, copialo e incollalo nella parte inferiore della pagina, o in un documento esterno .js, richiamato sempre nella parte inferiore o foot del documento .html.
Adesso puoi goderti il tuo dark theme dinamico per il tuo sito web.
Leggi anche: Come creare un sito multilingua PHP
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti: