Designul pentru Dark Mode: Cele mai bune practici
Ce este dark mode și de ce contează pentru afacerea ta
Dark mode este o schemă de culori în care fundalurile sunt întunecate, iar textul și elementele UI sunt deschise la culoare. Sistemele de operare iOS, Android, macOS și Windows îl oferă nativ din 2019, iar utilizatorii l-au adoptat rapid: peste 80% dintre posesorii de smartphone-uri folosesc dark mode cel puțin o parte din zi, conform datelor Android Authority din 2023.
Pentru un antreprenor din Timișoara sau București care lansează un produs digital, dark mode nu mai este o opțiune opțională. Dacă site-ul sau aplicația ta nu îl suportă, o parte din utilizatorii tăi vor naviga pe un fond alb orbit în mijlocul nopții, iar asta afectează direct timpul petrecut pe platformă și rata de conversie.
Problema reală nu este dacă implementezi dark mode, ci cum îl implementezi. Un dark mode prost executat este mai rău decât unul absent, pentru că transmite lipsă de atenție la detalii, exact ceea ce un brand premium nu își permite.
Greșeala numărul unu: inversarea culorilor
Primul instinct al multor developeri este să aplice un filtru CSS invert() sau să schimbe pur și simplu #ffffff cu #000000. Rezultatul arată amateur și creează probleme reale de lizibilitate.
De ce negrul pur este o problemă
Pe un fond complet negru (#000000), textul alb pur (#ffffff) creează un contrast atât de mare încât ochii obosesc rapid. Fenomenul se numește halation: literele par că strălucesc și devin greu de citit pe blocuri mari de text. Google Material Design recomandă explicit evitarea negrului pur în dark mode.
Soluția: folosește un gri închis ca fundal de bază. Valorile recomandate pentru fundalul principal sunt între #121212 și #1e1e1e. Elementele suprapuse (carduri, modals, sidebar-uri) primesc tonuri progresiv mai deschise, creând adâncime vizuală fără lumini puternice.
Suprafețe, nu un singur fundal
Un dark mode matur nu are un singur fundal negru. Are un sistem de suprafețe. Gândește-te la el ca la straturi de hârtie suprapuse într-o cameră slab iluminată: fiecare strat de deasupra reflectă puțin mai multă lumină. În practică, asta înseamnă că un card pe fundalul principal va fi #1e1e1e când fundalul paginii este #121212, iar un dropdown deschis în acel card va fi #2c2c2c.
La Design Creator Lab, aplicăm acest sistem de suprafețe în proiectele Next.js și React pe care le livrăm, pentru că asigură coerență vizuală indiferent de componentă sau pagină.
Culori și contrast: regulile care nu pot fi ignorate
WCAG 2.1 (Web Content Accessibility Guidelines) impune un raport de contrast minim de 4.5:1 pentru text normal și 3:1 pentru text mare (peste 18pt sau 14pt bold). Aceste praguri sunt valabile atât pentru light mode, cât și pentru dark mode. Mulți designeri respectă aceste reguli în light mode, dar le ignoră complet când trec la dark.
Saturația scade în dark mode
O culoare de brand vibrantă pe fundal alb arată excelent. Aceeași culoare pe fundal dark poate părea prea agresivă sau, paradoxal, prea palidă, în funcție de valoarea ei de luminanță. Regula practică: reduci saturația culorilor primare cu 15-30% când le folosești în dark mode și crești puțin luminozitatea.
De exemplu, un albastru de brand #0057FF optim pe fundal alb devine aproximativ #4D8EFF în dark mode, mai deschis și mai puțin saturat, pentru a menține lizibilitatea și a nu obosi retina.
Nu uita de culorile semantice
Verde pentru succes, roșu pentru eroare, galben pentru avertisment. Aceste culori semantice trebuie și ele ajustate. Un roșu de eroare #FF0000 pe fond negru are un contrast care poate provoca disconfort. Un #FF6B6B sau #FF8A80 transmite aceeași urgență cu mai puțin stres vizual.
Într-un proiect de platformă de management pentru o companie din Cluj pe care am livrat-o în 2024, am redefinit toate culorile semantice pentru dark mode separat, nu ca derivate automate ale celor din light mode. Diferența în testele de utilizabilitate a fost clară: utilizatorii au raportat mai puțin disconfort vizual la sesiunile lungi de lucru.
Tipografie în dark mode: ce se schimbă
Fontul și culorile de text necesită ajustări specifice pentru dark mode. Nu este suficient să schimbi color: black în color: white.
Greutatea fontului contează mai mult
Pe fundal închis, fonturile fine (light, thin) devin greu de citit. Un font cu greutatea 300 care arată elegant pe fundal alb poate părea subțire și neclar pe dark. Recomandarea: folosește greutăți de 400 (regular) ca minim pentru body text în dark mode. Dacă foloseai 300 în light mode, treci la 400 în dark mode.
Culoarea textului: nu alb pur
Exact cum fundalul nu trebuie să fie negru pur, textul principal nu trebuie să fie alb pur. Folosește un alb-gri: #E0E0E0 sau #F0F0F0 pentru textul principal, și un gri mediu pentru textul secundar (#9E9E9E sau similar), respectând mereu raportul de contrast WCAG.
Textul mai puțin important (metadate, timestamps, labels secundare) poate folosi culori și mai șterse, dar nu mai jos de raportul 3:1 față de fundal. Aceasta nu este o regulă estetică, este o cerință de accesibilitate care afectează și SEO, pentru că Google penalizează paginile cu contrast insuficient.
Line-height și letter-spacing
Pe fonduri întunecate, creșteri mici ale interliniei (line-height: 1.6 față de 1.5) și ale spațierii literelor (letter-spacing: 0.01em) îmbunătățesc lizibilitatea fără modificări vizibile. Sunt ajustări de 5 minute care contează la scară.
Imagini, iconițe și elemente grafice în dark mode
Acesta este capitolul pe care majoritatea ghidurilor îl omit, deși este una dintre cauzele principale ale dark mode-ului care arată prost în producție.
Imaginile foto nu se inversează
O fotografie de produs sau de echipă arată la fel în dark mode și în light mode. Nu trebuie și nu poți să o modifici dinamic. Ceea ce poți controla este fundalul pe care stă imaginea și eventuala umbră sau bordură care o separă de pagină. Pe fundal dark, o umbră albă este absurdă. Folosește straturi de suprafață sau borduri subțiri în loc de umbre.
Logo-uri și iconițe: versiuni separate
Dacă logo-ul tău are o variantă dark și o variantă light, servește-le dinamic cu CSS prefers-color-scheme sau prin JavaScript. Un logo cu text negru pe fundal dark este invizibil. Un logo alb pe fundal alb este la fel de invizibil. Cele mai bune implementări pe care le-am livrat includ un set complet de assets: logo principal, logo inversat, favicon adaptat, og:image adaptat.
Iconițele SVG inline sunt cele mai ușor de adaptat: schimbi fill sau stroke prin CSS variables și nu ai nevoie de fișiere duplicate.
Ilustrații și grafice
Ilustrațiile vectoriale create pentru light mode pot arăta strident pe dark, mai ales dacă au culori de fundal alb hardcodate. Soluția curată este să construiești ilustrațiile cu fundaluri transparente și culori care funcționează pe ambele scheme. Dacă proiectul are budget, creezi variante dedicate pentru dark mode.
Implementarea tehnică: CSS, JavaScript și detectarea preferinței
Preferința utilizatorului pentru dark mode este expusă de sistem prin media query-ul prefers-color-scheme: dark. Poți să o detectezi în CSS fără JavaScript și să aplici automat tema corespunzătoare.
CSS custom properties: fundația oricărei implementări serioase
Un sistem de design tokens bazat pe CSS custom properties este singura abordare scalabilă pentru dark mode. Definești variabile semantice, nu valori brute:
- --color-background: culoarea de fundal principală
- --color-surface: culoarea cardurilor și suprafețelor ridicate
- --color-text-primary: textul principal
- --color-text-secondary: textul auxiliar
- --color-accent: culoarea de brand ajustată per temă
Redefinești aceste variabile sub @media (prefers-color-scheme: dark) sau sub o clasă .dark aplicată pe html. Restul codului CSS folosește exclusiv variabilele, nu valori hardcodate. Asta înseamnă că adaugi o componentă nouă și ea respectă automat ambele teme, fără niciun cod suplimentar.
Comutator manual: lasă utilizatorul să aleagă
Detectarea automată a preferinței din sistem este punctul de start, nu finalul. Oferă un comutator manual în interfață. Salvează preferința în localStorage și aplică tema înainte ca pagina să fie randată (script sincron în <head>), altfel utilizatorul va vedea un flash de culoare greșită la fiecare refresh.
Această detaliere tehnică face diferența dintre un dark mode care se simte nativ și unul care clipește la încărcare, un detaliu minor care spune multe despre calitatea produsului digital în ansamblu.
Testarea dark mode în proiecte reale
Testează pe dispozitive reale, nu doar în DevTools. Un MacBook Pro cu ecran Retina și un telefon mid-range cu ecran OLED randează culorile diferit. Ceea ce arată bine în simulatorul din Chrome poate arăta diferit pe un Samsung Galaxy cu ecran AMOLED, unde negrul pur este efectiv negru pur și contrastul poate fi extrem.
Concluzie: dark mode nu este un feature, este o decizie de design
Un dark mode bine implementat reduce oboseala vizuală a utilizatorilor în sesiunile lungi, economisește bateria pe ecranele OLED și transmite atenție la detalii, un indicator al maturității unui produs digital. Un dark mode prost implementat face exact opusul.
Pașii concreți de la care pleci:
- Definești un sistem de suprafețe bazat pe gri-uri, nu pe negru pur.
- Ajustezi saturația și luminozitatea culorilor de brand pentru dark mode separat.
- Verifici contrastul tuturor combinațiilor text-fundal cu un tool dedicat (Stark, Colour Contrast Analyser).
- Adaptezi greutățile fonturilor și interliniei pentru lizibilitate pe fonduri închise.
- Construiești assets grafice cu variante dark sau cu fundaluri transparente.
- Implementezi CSS custom properties ca sistem unificat și oferi comutator manual.
La Design Creator Lab, abordăm dark mode ca parte integrată a sistemului de design, nu ca o etapă adăugată la final. Dacă lucrezi la un produs digital sau un site web custom pentru afacerea ta și vrei să faci lucrurile corect de la început, discutăm detaliile proiectului tău.