Sötét téma CSS-ben

Ma már a legtöbb eszközünk (Windows 10, Android, iOS) képes arra, hogy az éjszaka érkeztével úgynevezett dark mode-ra (sötét téma) váltson, ezt egy sor alkalmazás, köztük a böngészők is támogatják, ha a rendszerünkből is a legfrissebbet használjuk.

Talán már van két éve is, hogy a webprogramozóknak kecsegtető CSS megoldás is elérhető, persze nem mindenáron.

A reszponzív, a megjelenítőhöz igazodó, mobilokon is tökéletesen használható weboldalaknál már ismerős a media query, ezzel lehet ugyanis a képernyőhöz, vagy épp a nyomtatott papírhoz igazítani a megjelenést. Ennek segítségével lehet a sötét módot is használatba venni:

@media (prefers-color-scheme: dark)
{
  // rules in here will only be applied if the user's OS is in dark mode!
}

Ahogy a fenti példakód is mutatja, az így létrehozott blokkba kerülnek a sötét tartalmi elemekre vonatkozó módosítások. Tehát itt azokat a szelektorokat használhatjuk, amikre a világostól eltérő témát használni akarjuk érvényre juttatni.

Természetesen fordítva is működik, ha a sötét az alapértelmezett témánk, de világosra is válthat a webes app.

// Default body in dark
body
{
	background-color: black;
	color: white; 
} 

// Changes if the theme switched to light
@media screen and (prefers-color-scheme: light)
{
	body 
	{
		background-color: white;
		color: black;   
	} 
}

A dolog nem újkeletű, de ahogy látom, térnyerésére még mindig várni kell.

A böngészőtámogatottsághoz hozzátartozik, hogy az elterjedt Firefox, Edge, Opera, Safari, Chrome nagyágyúk legfrissebb változatai már egészen biztosan támogatják az új media query-t, de érdemes minél több böngészővel tesztelni. A régebbi verziók egészen biztosan nem tudnak mint kezdeni az új funkcióval, de a jó hír, hogy ez esetben semmi sem történik. Nem lesz használhatatlan az oldal, "csupán" semmi nem változik a sötét téma esetén.