Cum implementezi dark mode intr-un website

Configurare noua (How To)

Situatie

Avand rolul de a reduce consumul de energie si automat de a economisi baterie pe dispozitivele mobile, dar si rolul de a reduce stresul asupra ochilor nostri atunci cand avem sesiuni lungi de utilizare a dispozitivelor. Dark mode este nelipsit astazi, atat implementat la nivel de sistem de operare, dar si implementat la nivel de aplicatie sau chiar website.

Solutie

Nu doar simpla existenta a acestuia, dar si comutarea automata in functie de momentul zilei in care este folosit dispozitivul se dovedeste a fi o functie cel putin subapreciata. In continuarea vom vedea cum putem implementa extrem de simplu dark mode intr-un website, perfect sincronizat cu optiunea setata la nivel de sistem de operare si cu comutare automata atunci cand sistemul il schimba.

 html, body {

   background-color: #eee;

   color: white;

 }

 main {

   background-color: #fff;

 }

/* dark mode */

@media (prefers-color-scheme: dark) {

 html, body {

   background-color: #1c1c1c;

   color: white;

 }

 main {

   background-color: #262626;

 }

}

 

Mai sus avem un exemplu CSS Media Query care ne ajuta sa implementam dark mode in orice website:

  • atunci cand setatea in sistemul de operare este light, browserul utilizeaza regulile CSS obisnuite, sau cele din media query: @media (prefers-color-scheme: light)
  • atunci cand setarea in sistemul de operare este dark, browserul utilizeaza regulile CSS setate in media query: @media (prefers-color-scheme: dark)

Tip solutie

Permanent

Voteaza

(10 din 17 persoane apreciaza acest articol)

Despre Autor

Leave A Comment?