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)
Leave A Comment?