S pomočjo CSSja lahko enostavno vplivamo na to, kaj se dogaja na ekranu, ko ima uporabnik vklopljeno funkcijo “dark mode”. Slednje storimo z uporabo prefers-color-scheme.

Kaj je “dark mode”?

“Dark mode” je oblika prikaza, in sicer naprava spremeni ozadje barv iz svetlih v temne. Tako se zmanjša napor za oči in zmanjša izpostavljenost modri svetlobi. Na mobilnih telefonih pa se zmanjša tudi poraba energije.

Če lahko barve ozadja, besedila in linkov hitro spremenimo pa imamo večje težave pri slikah. Če imamo npr. sliko na belem ozadju sama slika v načinu “dark mode” precej izstopa. Rešitev za te primere pa se skriva v elementu <picture>.

Primer rešitve za zamenjavo slike v “dark mode” načinu

<picture>
<source
srcset="luna.png"
media="(prefers-color-scheme: dark)">
<img src="sonce.png">
</picture>

Če ima uporabnik vklopljen “dark mode” način se mu prikaže luna, drugače vidi sonce.

Zgornja rešitev je precej dobro podprta v brskalnikih. V brskalnikih, kjer ni podpore pa se enostavno prikaže klasična IMG značka, v našem primeru sonce.

Dobro je vedeti tudi, da brskalnikih ne prenese obeh slik, ampak samo tisto, ki jo potrebuje, eno ali drugo. Tako se ni za bati, da ima uporabnik ne potreben prenos podatkov.