Am pus Dark Mode pe blog

Am implementat Dark Mode pe blog. Nu-l veți vedea în acțiune decât în momentele când telefonul vostru sau Windows-ul vostru este reglat, de asemenea, pe Dark Mode. Altfel spus, dacă-l vreți pe dispozitiv, îl veți avea și pe site.

Eu folosesc Dark Mode automat seara pe telefon, că este mai confortabil pentru ochi, în special dacă faceți un browsing în beznă. Ar trebui să vă protejați ochii cu dark mode sau măcar blue light filter configurat pe activare automată între apus și răsărit sau alte ore asemănătoare.

N-am vrut să utilizez un plugin pentru asta și nici vreun JavaScript cu butoane de toggle. Am aflat recent însă că există o clasă CSS suportată de majoritatea browserelor. Se numește prefers-color-scheme și poate fi folosită pentru a specifica alte culori pentru fiecare element din pagină în caz că dark mode este activat în sistem.

Mai exact, pentru cei ce se gândesc la o implementare similară, în fișierul style.css sau ce folosiți voi adăugați undeva la final:

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

și între acolade începeți să modificați culorile ce vor fi afișate când apare dark mode. De exemplu:

@media (prefers-color-scheme: dark) { 
body {background-color: black; color: white;}
h1 {color:white}
a, a:active, a:visited, a:hover {color:#80dfff;}
}

Și așa mai departe cu tot ce-i de modificat. Evident, experții vă vor spune să nu folosiți fundal negru, ci un gri foarte închis, iar textul să nu fie alb, ci un gri foarte deschis. Ar trebui să-i ascultați. Sunt în linkurile de mai jos și idei mai îndrăznețe, de exemplu desaturarea parțială a imaginilor sau reducerea opacității pentru a le întuneca un pic în dark mode, dar eu n-am făcut asta. Există însă comenzi CSS pentru a da invert/negativ unui logo sau simbol prea luminos, de exemplu, dacă vreți un reglaj rapid.

Mai trebuie să modificați și alte culori prin pagină. Eu a trebuit să găsesc alte soluții pentru chenarul de la quote, tabele, h1, h2, h3, caseta de comentarii și alte elemente, că e nevoie de contrast bun în toate. Se rezolvă însă analizând pe rând cam toate elementele ce-ar putea apărea într-o pagină normală.

Ar trebui să vedeți site-ul pe fond negru de câte ori aveți Dark Mode activat pe telefon sau în Windows. Dacă nu merge, dați un refresh sau un clear cache. Pe mobile ar putea fi mai dificilă procedură. Eu pe Chrome de telefon a trebuit să merg în Settings > Apps, să găsesc acolo Chrome, să intru la Storage și să apăs pe Clear Cache. Browserele de pe mobil au un cache mai agresiv.

Dacă vreți să aveți Chrome de mobil mereu pe dark mode, este o setare și pentru asta chiar în program. Settings > Theme > Dark. În Windows 10, setarea este în Settings > Personalization > Colors.

Nu trebuie să activați Dark Mode pe PC sau mobil cât timp faceți modificările și testele necesare. Puteți simula Dark Mode în Chrome Dev Tools. Apăsați F12 și în meniul uneltei mergeți la More Tools > Rendering. Se va deschide un nou tab în partea de jos, iar o opțiune pe acolo este Emulate CSS media feature prefers-color-scheme. Dacă nu vedeți o opțiune Rendering, alegeți Run Command, scrieți acolo Rendering și alegeți Show Rendering ca să activați meniul respectiv.

Bibliografie:

• Web.dev
• CSS Tricks
• MDO