Dark mode nu mai e un moft: sistemele de operare îl propun din ce în ce mai insistent, iar utilizatorii îl cer. Un site fără variantă întunecată pare învechit, iar implementarea corectă cere mai mult decât „invers culorile”. Iată sistemul complet.
1. Începe din CSS, nu din JavaScript
Fundamentul: variabile CSS pentru culori. Definești paleta în luminoasă și întunecată, apoi comuți prin clase sau prin prefers-color-scheme. Cu variabile, schimbarea lor pe <html> schimbă întregul site – fără să rescrii fiecare componentă. E diferența dintre un sistem și un hack.
2. Preferința din sistem: primul pas
prefers-color-scheme: dark îți spune ce preferă utilizatorul la nivel de sistem. Respecți asta implicit, fără buton. Mulți utilizatori nu vor apăsa niciodată un toggle; tema urmărește sistemul lor și totul se simte natural.
3. Toggle manual + persistență
Adaugi opțiunea „Luminos / Întunecat / Sistem” și salvezi alegerea: în localStorage, cu sincronizare între file-uri. Citești preferința înainte de prima randare, ca să nu existe un flash de lumină la refresh. Asta e diferența între un dark mode „care merge” și unul care se simte profesional.
4. Contrastul: capcana cea mai frecventă
„Dark mode” nu înseamnă negru pur și alb pur. Fundalul ideal e un gri foarte închis (#121212), iar textul nu alb pur, ci un alb ușor atenuat. Acest lucru previne oboseala ochilor și respectă contrastul WCAG. Apoi verifică fiecare culoare – un verde care arată bine pe alb poate deveni ilizibil pe negru.
5. Imaginile și umbrele
Imaginile cu fundal alb ies ca niște pete pe dark mode; aplică un efect subtil de înmuiere sau încadrează-le. Umbrele adânci pierd sensul pe fundal întunecat – subliniază cu borduri și nuanțe, nu cu umbre. Elementele interactive trebuie să rămână distincte: hover și focus vizibile în ambele teme.
Un sistem de teme, nu două site-uri
Cu variabile CSS și componente neutre, întreținerea costă aproape zero. E exact abordarea pe care o folosesc la site-urile pe care le construiesc: design system, nu pagini lipite. Dark mode inclus, fără dublarea codului.