Dark Mode pentru site-ul tău cu o singură linie în CSS
Google vrea să aducă Dark Mode pe Chrome, astfel încât să poți vedea site-urile web într-un fel de mod noapte. Deocamdată treaba asta e în teste. Am descărcat și eu Google Canary, am testat modul întunecat și cred că mai au de lucru la el.
Din fericire, poți avea Dark Mode pe site-ul tău cu ajutorul unui filtru simplu în CSS: invert. Am mai văzut filtrul acesta aplicat pe imagini, însă îl poți aplica pe toată pagina web.
Dacă ai blog WordPress, trebuie să pui codul de mai jos la Aspect – Personalizare – CSS suplimentar.
Acesta este codul:
body{filter: invert(100%)}img{filter: invert(100%) opacity(0.8)}
Primul filtru inversează culorile pe toate elementele din pagină. Cel de-al doilea ia imaginile și le mai inversează o dată, astfel încât să rămână neschimbate. Filtrul de opacitate l-am pus pentru imaginile albe.
În loc de opacity(0.8) poți pune sepia(100%). Arată într-un mare fel.
Testez Dark Mode și pe acest blog. De la ora 20:00 până la 06:59 sunt în modul întunecat.
Bun… care este avantajul ca site-urile se vad in Dark Mode?
Pe mine mă deranjeaza mai puțin la ochi.
Interesanta metoda. Eu nu pot s-o aplic deocamdata din cauza fundalului alb de la un logo si transparent de la altul. E prea deranjant contrastul.
Eu nu mă pot concentra deloc pe site-urile dark. Ba chiar ies de pe ele în secunda 2.