Con gli ultimi update dei sistemi operativi dei nostri smarphone, di Mac OS e di molte delle applicazioni che più usiamo ogni giorno, la dark mode, o night mode, è ormai spesso un default. Con lo schema di colori invertito, icone, indicatori e tutti gli elementi delle UI devono essere ripensate per ottimizzare leggibilità e usabilità, e se pian piano molte app per desktop si stanno aggiornando per una piena compatibilità con la night-mode, alcuni dettagli rimangono ancora da migliorare.
Uno di questi dettagli, seppur piccolo, è rimasto ancora fuori dai maggiori aggiornamenti di temi WordPress, browser e sistemi operativi: è la favicon. Quel piccolo dettaglio che affianca il nome della pagina web che stiamo leggendo nella tab di Chrome o Safari da poco supporta il formato SVG, e con esso un trucchetto molto interessante per variarne lo schema di colori in modo automatico.
Sfruttando infatti la media query CSS “prefers-color-scheme” possiamo agire sul riempimento, la traccia e altri aspetti dello <style> della nostra iconcina SVG in modo che questa cambia automaticamente in base alla modalità in cui si trova il dispositivo che stiamo usando: normale o dark.
Questo trucco (così come anche il formato SVG per le favicon) è supportato da Chrome, Opera e Firefox, è parzialmente supportato da Safari: più info si trovano su Can I use...
- Esportare una favicon in SVG
Creato il nostro logo o la nostra icona con Illustrator (o un programma equivalente per l’editing vettoriale) in una tavola da disegno quadrata di 512x512px, dovremo poi esportarlo in SVG. Basterà cliccare su “File” > “Esporta” > “Esporta per schermi”, quindi selezionare la tavola da disegno con l’icona. Dopo aver selezionato il percorso di salvataggio del file da “Esporta in:” selezioniamo il formato in “Formati:” e scegliamo dal menu a tendina l’SVG. Possiamo poi cliccare su “Esporta tavola da disegno”. Il gioco è fatto!
- Modificare l’SVG per renderla color-scheme responsive
Creato l’SVG dobbiamo ora modificarne il codice per renderlo “responsive” alla modalità night: non abbiamo bisogno di usare programmi particolari ma basterà Text Edit (su Mac) o Blocco Note su Windows, o comunque un editor di testo semplice. Per i più avvezzi alla modifica di HTML/CSS, qualsiasi editor di codice come Dreamweaver supporterà il nostro SVG.
Cliccando sul file SVG con il tasto destro del mouse dovremo scegliere di aprire il file con l’editor di testo: questo ci permetterà di modificarne il codice, che assomiglierà a qualcosa del genere:<svg id="Favicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:red;}</style></defs><circle class="cls-1" cx="256" cy="256" r="200"/></svg>
In questo caso si tratta di un cerchio rosso — “fill:red” —, che possiamo vedere dall’element <circle> che lo descrive con raggio “r” e coordinate del centro “cx” e “cy”. In particolare, lo stile del cerchio, che in questo caso è solo caratterizzato dal riempimento rosso, è descritto nel blocco <style>:<style>
.cls-1{fill:red;}
</style>
Tutti gli elementi del nostro SVG con classe “.cls-1” avranno un riempimento “fill:red” rosso, e come vediamo dalla descrizione degli attributi del <circle>, questo ha “class”cls-1””, quindi erediterà dalla dichiarazione di stile il colore rosso.
Ora, noi vogliamo che questo colore cambi se la modalità notturna è attiva nel device, e per far ciò useremo la media query “perfers-color-scheme”, andandola ad aggiungere all’interno della dichiarazione degli stili dell’SVG. - Aggiungere la media query al codice della favicon SVG
Tornando al nostro editor di testo, dobbiamo quindi aggiungere subito prima la chiusura dello style </style> la media query per la night mode:
@media (prefers-color-scheme: dark) {
.cls-1 {
fill: white;
}
}
Che molto intuitivamente dice: se lo schema di colori del device è “dark”, cambia la proprietà “fill” della mia classe “.cls-1” con il colore “white”. Ovviamente possiamo impostare qualsiasi colore al posto di “white” usando il codice colore HEX come “#ffffff” o RGB “rgb(255, 255, 255)”, cioè nel primo caso:@media (prefers-color-scheme: dark) {
.cls-1 {
fill: #ffffff;
}
}
E nel secondo:@media (prefers-color-scheme: dark) {
.cls-1 {
fill: rgb(255, 255, 255);
}
}
Il risultato finale sarà quindi:<svg id="Favicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:red;} @media (prefers-color-scheme: dark) {.cls-1 {fill: white;}}</style></defs><circle class="cls-1" cx="256" cy="256" r="200"/></svg>
Il gioco è fatto: basta salvare il file (sempre mantenendo l’estensione .svg) e caricarlo in WordPress nella libreria media. - Come cambiare la favicon SVG in WordPress
La favicon di un sito costruito su WordPress si cambia molto facilmente: basterà entrare nella nostra dashboard all’indirizzo www.miosito.com/wp-admin, cliccare su “Aspetto” > “Personalizza”, e, nelle impostazioni della barra laterale che si aprirà sulla tua homepage, selezionare “Denominazione sito”.
Qui sarà sufficiente modificare o aggiungere una nuova icona del sito andandola a selezionare nella nostra libreria media o caricandola ex-novo. Nota bene: è necessario che il file SVG della nostra favicon sia in formato quadrato, e che misuri 512x512 px. Questo permetterà di evitare di dover forzatamente ritagliare l’immagine (cosa che non funzionerebbe comunque per un SVG nell’editor delle immagini di WordPress) in un formato quadrato e poter salvare la nostra scelta direttamente
Nel caso che il vostro file SVG, una volta caricato, risulti nella galleria media 1x1px o un valore random (dovuto magari a una tavola da disegno di Illustrator in origine troppo grande o piccola), basterà cambiarne le dimensioni di larghezza e altezza manualmente, impostandole a 512px.
Impostata la favicon, che apparirà nella preview della menù laterale Aspetto, basterà quindi cliccare su “Pubblica” per rendere effettive le modifiche e avere la nostra favicon cangiante online.
