Come abilitare l’auto dark mode su un sito

Configurare la modalità dark automatica su un sito con CSS

Gli ultimi aggiornamenti dei più utilizzati sistemi operativi mobile iOS e Android vedono l’introduzione della dark mode, una modalità che permette all’utente di vedere la versione oscurata, a livello GUI, dello stesso dispositivo.

La dark mode però, oltre che ad essere applicata agli sfondi, ai colori e ai menù in tute le funzioni dello smartphone, vengono automaticamente utilizzate anche dalle app compatibili con tale modalità.

Anche ai siti internet è possibile applicare tale proprietà, configurando il CSS in modo tale che quando nel browser che stiamo usando è attiva la dark mode questa va a leggere lo schema dark dal CSS, applicandolo alla visualizzazione del sito.

Ciò avviene aggiungendo al CSS questo elemento

@media (prefers-color-scheme: dark) {
	... tutte le variazioni...
}

e inserendo al suo interno tutte le modifiche ai vari componenti del CSS

@media (prefers-color-scheme: dark) {
	body {
		...
	}
	img {
		...
	}
	a {
		...
	}
}

in modo che questo appaia in modalità dark quando il browser ha la medesima modalità attiva.