Funcția Light-Dark din CSS: Adaptare Automată a Temei pentru un Web Global

În lumea globalizată de astăzi, site-urile web trebuie să fie accesibile și atractive vizual pentru utilizatori cu medii și preferințe diverse. Una dintre cele mai eficiente metode de a realiza acest lucru este prin adaptarea automată a temei, în special prin oferirea de teme deschise (light) și întunecate (dark) care se ajustează în funcție de setările de sistem ale utilizatorului. Acest articol de blog vă va ghida în implementarea acestei funcționalități folosind media query-uri CSS și proprietăți personalizate, asigurând o experiență de navigare fluidă și confortabilă pentru audiența dumneavoastră internațională.

De ce să implementați teme automate deschise și întunecate?

Există mai multe motive convingătoare pentru a încorpora adaptarea automată a temei în proiectele dumneavoastră web:

• Experiență îmbunătățită pentru utilizator: Utilizatorii au adesea o preferință puternică pentru temele deschise sau întunecate. Respectarea setărilor de sistem le permite să navigheze pe site-ul dumneavoastră într-un mod natural și confortabil. Acest lucru este deosebit de important pentru utilizatorii care petrec ore îndelungate în fața ecranelor, deoarece temele întunecate pot reduce oboseala ochilor în medii cu lumină slabă.
• Accesibilitate îmbunătățită: Temele deschise și întunecate pot îmbunătăți semnificativ accesibilitatea pentru utilizatorii cu deficiențe de vedere. Modurile cu contrast ridicat pot face textul mai ușor de citit, în timp ce temele întunecate pot reduce strălucirea și pot îmbunătăți lizibilitatea pentru utilizatorii cu sensibilitate la lumină.
• Design web modern: Implementarea temelor deschise și întunecate demonstrează un angajament față de principiile moderne de design web și orientarea către utilizator. Arată că vă pasă să oferiți o experiență finisată și adaptabilă.
• Reducerea oboselii ochilor: Deosebit de important pentru utilizatorii din regiunile cu program lung de lucru în fața computerelor (de exemplu, multe țări asiatice). Tema întunecată va diminua solicitarea ochilor.
• Economisirea bateriei: Pe dispozitivele cu ecrane OLED, temele întunecate pot conserva energia bateriei prin reducerea cantității de lumină emisă. Acest lucru este relevant pentru utilizatorii din întreaga lume, în special pentru cei care folosesc dispozitive mobile cu o capacitate limitată a bateriei.

Cum se implementează adaptarea automată a temei cu CSS

Elementul central al adaptării automate a temei constă în media query-ul prefers-color-scheme. Acest media query CSS vă permite să detectați schema de culori preferată de utilizator (deschisă sau întunecată) și să aplicați stilurile corespunzătoare.

Pasul 1: Definiți proprietăți personalizate (variabile CSS)

Începeți prin a defini proprietăți personalizate (variabile CSS) pentru a stoca valorile de culoare pentru temele deschise și întunecate. Acest lucru facilitează comutarea între teme prin simpla actualizare a valorilor variabilelor.

:root {
  --background-color: #ffffff; /* Fundal temă deschisă */
  --text-color: #000000; /* Text temă deschisă */
  --link-color: #007bff; /* Link temă deschisă */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Fundal temă întunecată */
    --text-color: #ffffff; /* Text temă întunecată */
    --link-color: #66b3ff; /* Link temă întunecată */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

În acest exemplu, definim variabile pentru culoarea de fundal, culoarea textului, culoarea link-ului și culorile butoanelor. Selectorul :root aplică aceste variabile întregului document. Apoi, media query-ul @media (prefers-color-scheme: dark) suprascrie aceste variabile cu valorile pentru tema întunecată atunci când utilizatorul și-a setat sistemul pe modul întunecat.

Pasul 2: Aplicați proprietățile personalizate stilurilor dumneavoastră

Apoi, aplicați aceste proprietăți personalizate stilurilor dumneavoastră CSS pentru a controla aspectul elementelor site-ului web.

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Tranziție lină */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Aici, folosim funcția var() pentru a accesa valorile proprietăților noastre personalizate. Am adăugat și o proprietate transition elementului body pentru a crea o tranziție lină între teme.

Pasul 3: Testare și rafinare

Testați implementarea în detaliu pe diferite browsere și sisteme de operare. Browserele moderne precum Chrome, Firefox, Safari și Edge suportă complet media query-ul prefers-color-scheme. Puteți comuta între modurile deschis și întunecat în setările sistemului de operare pentru a vedea modificările reflectate pe site-ul dumneavoastră.

Tehnici avansate și considerații

Furnizarea unui comutator manual de temă

Deși adaptarea automată a temei este un punct de plecare excelent, unii utilizatori ar putea prefera să suprascrie manual setările de sistem. Puteți oferi un comutator manual de temă folosind JavaScript și stocarea locală (local storage).

HTML:

Comută Tema

JavaScript:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Implicit este auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Aplică tema inițială la încărcarea paginii
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // Dacă este setat pe auto, lasă prefers-color-scheme să decidă
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Adăugați următorul CSS împreună cu CSS-ul anterior. Observați suprascrierea manuală:

body.light-theme {
  --background-color: #ffffff; /* Fundal temă deschisă */
  --text-color: #000000; /* Text temă deschisă */
  --link-color: #007bff; /* Link temă deschisă */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Fundal temă întunecată */
  --text-color: #ffffff; /* Text temă întunecată */
  --link-color: #66b3ff; /* Link temă întunecată */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Acest fragment de cod adaugă un buton care permite utilizatorilor să comute între temele deschisă, întunecată și automată. Tema selectată este stocată în local storage, astfel încât persistă la reîncărcarea paginii.

Gestionarea imaginilor și a SVG-urilor

Unele imagini și SVG-uri s-ar putea să nu arate bine atât în tema deschisă, cât și în cea întunecată. Puteți utiliza media query-uri CSS pentru a afișa condiționat versiuni diferite ale acestor resurse.

img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Acest fragment de cod afișează o imagine (cu clasa light-mode) în modul deschis și o imagine diferită (cu clasa dark-mode) în modul întunecat.

Considerații privind paleta de culori pentru audiențe internaționale

Atunci când alegeți paletele de culori pentru temele deschise și întunecate, fiți atenți la asocierile culturale și la considerațiile de accesibilitate. Iată câteva linii directoare generale:

• Contrast: Asigurați un contrast suficient între culorile textului și cele ale fundalului pentru a respecta standardele de accesibilitate (WCAG). Folosiți instrumente precum WebAIM's Contrast Checker pentru a verifica rapoartele de contrast.
• Daltonism: Luați în considerare impactul alegerilor cromatice asupra utilizatorilor cu daltonism. Folosiți instrumente precum Color Blindness Simulator pentru a previzualiza site-ul așa cum este văzut de persoanele cu diferite tipuri de daltonism.
• Asocieri culturale: Fiți conștienți de faptul că culorile pot avea asocieri culturale diferite în diverse părți ale lumii. De exemplu, albul este adesea asociat cu puritatea și doliul în unele culturi, în timp ce roșul este asociat cu norocul și prosperitatea în altele. Cercetați asocierile culturale pentru a evita să ofensați sau să creați confuzie neintenționat.
• Palete neutre: Când aveți dubii, optați pentru palete de culori neutre care sunt mai puțin susceptibile de a fi interpretate greșit sau de a fi ofensive. Nuanțele de gri, bej și tonurile estompate pot fi o alegere sigură și versatilă.
• Testarea cu utilizatori: Efectuați teste cu un grup divers de participanți pentru a aduna feedback cu privire la alegerile cromatice și pentru a vă asigura că sunt percepute pozitiv de publicul țintă.
• Localizare: Acolo unde este posibil, luați în considerare utilizarea paletelor de culori localizate, adaptate preferințelor culturale ale unor regiuni sau țări specifice. Acest lucru poate implica ajustarea nuanțelor, saturației și luminozității culorilor pentru a se alinia gusturilor locale.

Considerații de performanță

Deși implementarea adaptării automate a temei este relativ simplă, este important să se ia în considerare impactul potențial asupra performanței. Evitați utilizarea selectorilor CSS sau a animațiilor prea complexe care pot încetini randarea. De asemenea, asigurați-vă că proprietățile personalizate sunt definite eficient pentru a minimiza supraîncărcarea căutărilor de variabile.

Iată câteva bune practici pentru optimizarea performanței:

• Păstrați selectorii CSS simpli: Evitați utilizarea selectorilor CSS prea specifici sau imbricați, deoarece aceștia pot crește timpul necesar browserului pentru a potrivi stilurile cu elementele.
• Utilizați proprietățile personalizate CSS cu discernământ: Deși proprietățile personalizate sunt puternice, utilizarea excesivă poate afecta performanța. Folosiți-le strategic pentru valori care se schimbă frecvent sau care sunt partajate între mai multe elemente.
• Minimizați animațiile inutile: Animațiile pot adăuga atractivitate vizuală site-ului dumneavoastră, dar pot afecta și performanța dacă nu sunt implementate cu atenție. Utilizați tranzițiile și animațiile CSS cu moderație și optimizați-le pentru o randare fluidă.
• Testați pe dispozitive reale: Testați întotdeauna site-ul pe dispozitive reale cu condiții de rețea și capacități hardware variate pentru a identifica potențialele blocaje de performanță. Utilizați instrumentele pentru dezvoltatori ale browserului pentru a profila performanța site-ului și a identifica zonele de îmbunătățire.

Cele mai bune practici de accesibilitate

Asigurați-vă că temele deschise și întunecate respectă ghidurile de accesibilitate, cum ar fi WCAG (Web Content Accessibility Guidelines). Aceasta include furnizarea unui contrast de culoare suficient, utilizarea HTML semantic și asigurarea că toate elementele interactive sunt accesibile de la tastatură.

Iată câteva bune practici specifice de accesibilitate de urmat:

• Contrast de culoare suficient: Asigurați-vă că raportul de contrast dintre culorile textului și fundalului respectă standardele WCAG 2.1 AA (4.5:1 pentru text normal, 3:1 pentru text mare). Folosiți instrumente precum WebAIM's Contrast Checker pentru a verifica rapoartele de contrast.
• HTML Semantic: Utilizați elemente HTML semantice (de ex., <header>, <nav>, <article>, <aside>, <footer>) pentru a structura conținutul în mod logic. Acest lucru ajută cititoarele de ecran și alte tehnologii asistive să înțeleagă conținutul și să navigheze eficient pe pagină.
• Accesibilitate de la tastatură: Asigurați-vă că toate elementele interactive (de ex., linkuri, butoane, câmpuri de formular) sunt accesibile de la tastatură. Utilizați atributul tabindex pentru a controla ordinea focalizării și pentru a oferi indicii vizuale care să indice ce element are focus.
• Atribute ARIA: Utilizați atributele ARIA (Accessible Rich Internet Applications) pentru a furniza informații suplimentare despre structura și funcționalitatea aplicației web către tehnologiile asistive. De exemplu, utilizați aria-label pentru a oferi o etichetă descriptivă unui element sau aria-hidden pentru a ascunde un element de cititoarele de ecran.
• Testarea cu tehnologii asistive: Testați site-ul cu cititoare de ecran și alte tehnologii asistive pentru a identifica posibilele probleme de accesibilitate. Folosiți instrumente precum NVDA (NonVisual Desktop Access) sau VoiceOver pentru a experimenta site-ul ca un utilizator cu deficiențe de vedere.
• Furnizați text alternativ pentru imagini: Utilizați atributul alt pentru a furniza text alternativ descriptiv pentru toate imaginile. Acest text va fi afișat dacă imaginea nu poate fi încărcată și va fi, de asemenea, citit de cititoarele de ecran.

Exemple din diferite regiuni

Luați în considerare aceste exemple despre cum temele deschise și întunecate pot fi adaptate pentru diverse audiențe globale:

• Asia de Est: În multe culturi est-asiatice, albul este asociat cu doliul. Când proiectați o temă întunecată pentru aceste regiuni, evitați utilizarea excesivă a textului alb pe un fundal negru. Optați în schimb pentru text alb-murdar sau gri deschis.
• Orientul Mijlociu: În unele culturi din Orientul Mijlociu, culorile vii sunt adesea preferate. Când proiectați o temă deschisă, luați în considerare utilizarea unor culori de accent vibrante pentru a adăuga interes vizual. Totuși, asigurați-vă că alegerile cromatice nu intră în conflict cu sensibilitățile culturale.
• Europa: În Europa, designurile minimaliste sunt adesea preferate. Când proiectați atât teme deschise, cât și întunecate, optați pentru layout-uri curate, tipografie simplă și palete de culori subtile.
• America Latină: În America Latină, designurile îndrăznețe și expresive sunt adesea apreciate. Când proiectați atât teme deschise, cât și întunecate, luați în considerare utilizarea unei tipografii jucăușe, a culorilor vibrante și a animațiilor dinamice.
• Africa: Datorită vitezelor variate ale internetului și capacităților dispozitivelor, acordați prioritate performanței și accesibilității. Utilizați elemente de design mai simple și testați pe conexiuni mai lente.

Concluzie

Implementarea temelor automate deschise și întunecate este un pas crucial către crearea unei experiențe web mai accesibile și mai prietenoase pentru o audiență globală. Prin utilizarea media query-urilor CSS și a proprietăților personalizate, puteți adapta cu ușurință aspectul site-ului dumneavoastră pentru a corespunde preferințelor utilizatorilor, pentru a reduce oboseala ochilor și pentru a îmbunătăți accesibilitatea pentru utilizatorii cu deficiențe de vedere. Nu uitați să luați în considerare asocierile culturale, ghidurile de accesibilitate și considerațiile de performanță pentru a asigura o experiență de navigare fluidă și incluzivă pentru toată lumea.

Prin adoptarea acestor tehnici, demonstrați un angajament față de principiile moderne de design web și satisfaceți nevoile diverse ale audienței internaționale, făcând site-ul dumneavoastră un spațiu primitor și confortabil pentru toți.