Schimbare automată a temei Light/Dark

Cum detectezi și schimbi automat tema Light/Dark fără JS

08 Aug, 2022

Recent am implementat pe blog o variantă interesantă prin care vizitatorii aveau posibilitatea de a alege tema Light/Dark folosind doar CSS. Singurul neajuns era că la orice schimbare de pagină tema revenea la valorile inițiale pentru că nu exista o valoare persistentă setată via JS sau cookies.

Știam că există posibilitatea de a alege o temă Light/Dark fie folosind setările sistemului de operare, fie din browser. Schimbările cromatice din setările sistemului de operare influențează în principal interfața aplicațiilor. Pentru cromatica (tema) unui site lucrurile sunt controlate cel mai simplu și rapid din setările browserului.

💡 Avem astfel posibilitatea ca printr-un media query simplu să afăm preferințele utilizatorului și să alegem tema Light/Dark automat în funcție de acestea folosind prefers-color-scheme.

Cu doar câteva modificări în fișierul styles.css am rezolvat mai multe, în cazul meu aveam nevoie să schimb doar culorile pentru background și color.

/* valorile default pentru tema implicită Light */
.wrapper { background: #F2F2F2;  color: #14171C; }

/* valorile pentru tema Dark */
@media (prefers-color-scheme: dark) {
    .wrapper {
		background: #14171C;
		color: #EFEFEF;
		}
}

🏆 Avantaje

  1. Respectarea preferințelor utilizatorului
  2. Am redus dimensiunea styles.css 2,248 KB față de 3,37 KB (valori necomprimate)
  3. Posibilitatea de a include pe viitor seturi extinse de preferințe individualizate pentru fiecare temă Light/Dark
  4. Un singur fișier pentru două teme
  5. Compatibilitate cu majoritatea browserelor
  6. Fără cod JS
  7. Fără cookies