Dark mode na sajtu: kada ima smisla i kako ga uraditi kako treba

Dark mode na sajtu, odnosno tamna tema, postao je uobičajen u operativnim sistemima i aplikacijama, pa se sve češće pitamo da li ga treba imati i na sajtu firme. Odgovor nije automatski „da“. Tamna tema može da poboljša udobnost čitanja za deo posetilaca, ali loše urađena donosi nečitljiv tekst, nevidljive logotipe i slike koje „iskaču“ iz stranice. U ovom tekstu objašnjavamo kada dark mode ima smisla, kako se tehnički uvodi preko prefers-color-scheme i na šta paziti kod kontrasta, slika i logotipa.

Da li vašem sajtu treba tamna tema

Za većinu sajtova malih firmi tamna tema nije prioritet. Kupac koji traži majstora, advokata ili stomatologa provede na sajtu nekoliko minuta i zanima ga sadržaj, a ne boja pozadine. Ipak, postoje slučajevi gde dark mode ima više smisla:

• sajtovi sa dugim čitanjem – blogovi, dokumentacija, edukativni sadržaj;
• aplikacije i portali u kojima korisnici provode mnogo vremena, često i uveče;
• tehnološka i kreativna publika koja tamnu temu očekuje;
• brendovi čiji je vizuelni identitet ionako taman, pa je svetla verzija zapravo alternativa.

Pre nego što uložite u tamnu temu, proverite da li su osnove rešene: čitljiv tekst, dobar kontrast, brzina i jasna navigacija. Tamna tema ne popravlja loš dizajn, već udvostručuje posao oko njega.

Tri pristupa: samo svetla, samo tamna ili obe

Ako se odlučite za obe teme, preporučujemo da sajt podrazumevano prati podešavanje sistema, a da prekidač bude dodatak, ne zamena.

Kako tehnički radi: prefers-color-scheme

Pregledači sajtu prosleđuju informaciju da li korisnik u sistemu koristi svetlu ili tamnu temu, kroz CSS medijski upit prefers-color-scheme. Sajt tada može da primeni drugačije boje bez ikakvog JavaScript-a. Najčistiji pristup izgleda ovako:

1. Sve boje definišite kao promenljive (CSS custom properties): pozadina, tekst, linkovi, okviri, dugmad.
2. U medijskom upitu za tamnu temu promenite samo vrednosti tih promenljivih; ostatak CSS-a ostaje isti.
3. Dodajte svojstvo color-scheme, kako bi pregledač i sam prilagodio polja formi, trake za skrolovanje i druge ugrađene elemente.
4. Ako imate prekidač, izbor korisnika sačuvajte u pregledaču i primenite ga pre prikaza stranice, da ne bi došlo do kratkog „bljeska“ pogrešne teme.

Kod WordPress sajtova tema mora biti pripremljena za ovakav pristup; dodaci koji „automatski“ prave tamnu verziju obrtanjem boja često daju nepredvidive rezultate i dodaju teret sajtu.

Kontrast i boje u tamnoj temi

Tamna tema nije samo obrnuta svetla. Najčešće greške nastaju kada se boje mehanički zamene:

• Izbegavajte čisto crnu pozadinu i čisto beli tekst. Previše oštar kontrast umara oči; tamnosiva pozadina i blago prigušen beli tekst čitaju se prijatnije.
• Proverite kontrast svake kombinacije. WCAG za običan tekst traži odnos kontrasta od najmanje 4,5:1, a za veliki tekst 3:1 – to važi i u tamnoj temi.
• Prilagodite boju brenda. Zasićena plava ili crvena koja dobro izgleda na beloj pozadini na tamnoj može da „vibrira“ ili bude nečitljiva; često je potrebna svetlija nijansa.
• Dubina bez senki. Senke se na tamnoj pozadini slabo vide, pa se slojevi (kartice, meniji) razlikuju svetlijim nijansama pozadine.
• Stanja i greške. Boje za uspeh, upozorenje i grešku moraju ostati prepoznatljive i čitljive.

Osnove izbora boja i fontova objasnili smo u tekstu boje i tipografija na sajtu, a pravila kontrasta u tekstu pristupačnost sajta: WCAG osnove.

Slike, logotipi i ikonice

Ovo je deo koji se najčešće zaboravi. Na tamnoj pozadini problemi postaju odmah vidljivi:

• Logotip sa tamnim tekstom na prozirnoj pozadini nestaje. Pripremite svetlu verziju logotipa, a pomoću elementa <picture> i medijskog upita pregledač može sam da izabere odgovarajuću.
• Ikonice u SVG formatu mogu da koriste boju teksta (currentColor), pa se same prilagođavaju temi.
• Slike sa belom pozadinom, poput fotografija proizvoda, deluju kao svetle mrlje. Blago zaobljeni okviri ili neutralna podloga ublažavaju taj efekat.
• Grafikoni i dijagrami sa fiksnim bojama mogu postati nečitljivi; proverite ih posebno.
• Fotografije ne treba bojiti ni obrtati; eventualno blago smanjite svetlinu vrlo svetlih slika.

Dodatne verzije slika i logotipa treba optimizovati kao i ostale medije – savete imate u tekstu optimizacija slika za sajt: WebP i lazy load.

Testiranje tamne teme

Svaka stranica sada postoji u dve verzije, pa se i testiranje udvostručuje. Proverite:

• sve tipove stranica – naslovnu, usluge, blog, kontakt, korpu i plaćanje ako imate web shop;
• forme, poruke o grešci i potvrde slanja;
• ugrađene sadržaje (mape, video, dugmad društvenih mreža) koji možda ostaju svetli;
• mejlove koje sajt šalje, jer ih klijenti za poštu takođe prikazuju u tamnom režimu;
• prelazak između tema bez ponovnog učitavanja, ako imate prekidač.

Uključite tamni režim na telefonu i računaru i prođite kroz sajt kao posetilac. Ako vam deo stranice „bode oči“, to će primetiti i kupci.

Zaključak

Dark mode je lep dodatak kada ga publika koristi i kada je dobro urađen, ali nije obavezan deo svakog sajta. Ako ga uvodite, oslonite se na prefers-color-scheme i CSS promenljive, prilagodite boje umesto da ih obrćete i pripremite verzije logotipa i ikonica. Više o tome kako dizajn utiče na poslovne rezultate pročitajte u vodiču web dizajn koji prodaje. Ako razmišljate o tamnoj temi za svoj sajt ili redizajnu boja, pošaljite nam upit za besplatnu analizu i ponudu.