Kako dodati noćni mod na svom sajtu za par minuta?

Noćni mod postaje polako standard. Svi operativni sistemi su dobili, ili dobijaju, noćni mod. Veb pregledači takođe. Sve je to super ali problem je što većina sajtova nema integrisan noćni mod i zbog toga korisnici moraju da se oslanjaju na razna rešenja (primer 1, primer 2).

Svi ti alati rade solidno svoj posao, ali najbolje je kada vlasnik dizajnira svoj sajt za noćni mod. Samo tada će svaki elemenat biti vidljiv i čitljiv.

Dodavanje noćnog moda na sopstveni sajt nije bilo baš jednostavno, pogotovo za nekoga ko nikada nije ni dotakao JavaScript, HTML i CSS.

Ali sada, zahvaljujući velikim kompanijama kao što su Google, Microsoft i Apple, možemo koristiti prost CSS media query za dodavanje noćnog moda! Ovaj media query nam je skratio i uprostio posao značajno, a sada ćete videti i koliko.

Uvod

Nedavno smo dobili još jedan Media Query koji proverava da li korisnik preferira noćni ili svetli mod na svom uređaju.

Radi se o Media Query nivoa 5: prefers-color-scheme.

U CSS-u Media Query nam omogućava da definišemo izgled nekog HTML elementa na stranici u zavisnosti od svojstva uređaja. Najpoznatiji su oni koji definišu stil stranice na osnovu veličine ekrana uređaja. Zahvaljujući tome danas postoje mobilne verzije sajtova.

Dakle, ako korisnik u svom sistemu izabere noćni mod, ovaj Media Query će primeniti na sajtu kolornu šemu za noćni mod koju je vlasnik sajta definisao – instant.

Evo kako to izgleda na ovom blogu:

Pored toga, možemo definisati šemu ako korisnik izabere svetli režim i ako ne izabere nijedan režim (podrazumevano).

U većini slučajeva biće dovoljno samo definisati šemu za noćni režim, a ako korisnik izabere svetli, ili nijedan, taj Media Query se neće primeniti i samim tim će biti učitan glavni CSS.

Ali, ako vam je sajt, recimo, zelene boje i želeli biste da imate šemu za svetli i tamni režim, onda morate razdvojiti CSS.

Uputstvo

Ovo uputstvo je namenjeno onima koji znaju makar malo oko CSS-a. Potrebno je da znate makar da inspektujete element i promenite mu dizajn. Ne mogu da ulazim u najsitnije detalje jer bi članak bio predugačak, ali možete slobodno pitati u komentaru ako vam nešto nije jasno.

Pre svega morate pronaći elemente koji moraju promeniti boju. Recimo, „body“ element mora imati tamnu pozadinu i svetli tekst – što je suprotno od trenutnog. Kada to uradite onda ćete videti koji se elementi ne uklapaju: linkovi, naslovi, liste…

Možete menjati dizajn lokalno u vašem računaru preko konzole u vašem veb pregledaču i zapisivati šta ste menjali.

Dobro, recimo da ste dobili dizajn koji vam odgovara, kako dalje?

Ako imate ovakav CSS:

body, pre {
     background-color: black;
     color: white;
}
.moja-klasa a {
     color: red;
}

Sav taj CSS samo stavite unutar pomenutog Media Query, evo ovako:

@media (prefers-color-scheme: dark) {
   body, pre {
     background-color: black;
     color: white;
   }
   .moja-klasa a{
     color: red;
   }
 }

U ovom primernu smo odredili da pozadina za „body“ i „pre“ taga bude crna, a tekst da bude bele boje. Isto tako smo odredili da elementi sa klasom „.moja-klasa“ imaju crvene linkove (tj. „a“ tagove).

Dakle, imate klasičan CSS i samo ga stavite u taj Media Query i on će se aktivirati čim korisnik prebaci sistem/browser na noćni mod.

Za svetli i nedefinisani mod je ista priča samo se koriste „light“ i „no-preference“ umesto „dark“. Evo ovako:

@media (prefers-color-scheme: light) { 
/* VAŠ CSS ZA SVETLU TEMU */
}
 @media (prefers-color-scheme: no-preference) { 
/* VAŠ CSS UKOLIKO NIŠTA NIJE IZABRANO */
}

Korisno: Namestite da se automatski uključi tamna tema kod Windows 10