CSS: Dark mode, Light mode, …

Funkcionalnost uporabe različnih tem na računalniku oz. programski opremi je dobrodošla. Namreč programiranje zvečer poteka veliko lažje v temnih temah (Dark mode) je primernejše za naše oči in posledično prepričuje glavobole naslednji dan.

Na Apple operacijskih sistemih že imamo na voljo funkcionalnost “dark mode”, ki okolje spremeni v temnejšo temo, vendar to ne velja za spletne strani. To funkcionalnost lahko dosežemo z uporabo @media značke “prefers-color-scheme”. Rezultat tega je, da se stran prikaže v temi, ki jo uporabnik preferira.

Pri “prefers-color-scheme” imamo na voljo “light” ali “dark” možnost. Z uporabo osnovne verzije imamo lahko tako 3 različne teme, root, light in dark.

Primer kode

* Light mode */
@media (prefers-color-scheme: light) {
html {
background: #fff;
color: #333;
}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}

Media query “prefers-color-scheme” je podprt v večini glavnih brskalnikih, razen v IE in Edge brskalniku. Za točno stanje preverite: Can I use prefers-color-scheme.

Z uporabo tem pa dobimo še novo dimenzijo, in sicer oblikovanje samih strani. Strani se trenutno gradijo glede na “okus” lastnika, oblikovalca, … z uporabo različnih tem pa moramo upoštevati, da bo stran mogoče gledano skozi prizmo drugačne teme, npr: light mode, dark mode, … kar pa bo zahtevalo dodatne prilagoditve spletnih strani oz. aplikacij.

Dodatno branje in viri na temo “dark mode”:

Oznake: CSSdark modelight modeteme

Komentiraj


*