Cum să schimbi tema Light/Dark doar din CSS fără JS

Nu este nevoie de niciun script ca să poți schimba rapid tema unui site static.

26 Jul, 2022

Am tot căutat o metodă prin care să pot schimba tema site-ului, să suporte moduri Light/Dark fără să folosesc cod JS sau cine știe ce script. După mai multe căutări și încercări, am reușit, câteva linii de cod adăugate în fișierul .CSS și .html.

Metoda descrisă folosește pseudo selectorul :checked în combinație cu combinatorul ~ și plasând comutatorul înaintea elementului principal din pagina html.

Notă: pentru că folosesc generatorul Zola, în template am adăugat o clasă wrapper care are rolul de a prinde toate elementele.

Există totuși o mică problemă pe care sper să o rezolv (dacă se poate) în viitor. La navigarea între pagini, tema este resetată la valoarea browser default -> Light. Acest lucru se datorează faptului că schimbarea se face la nivel .css, fără cookies etc, astfel, la încarcarea unei pagini noi valorile css sunt reinițializate.

Codul adăugat în index.html

<body>
<!-- start cod suplimentar -->
<input type="checkbox" id="dark-mode" />
<label for="dark-mode"></label>
<div class="wrapper">
<!-- sfârsit cod suplimentar -->
...

Codul adăugat în styles.css

:root {
  --liBk: #EFEFEF;
  --liCl: #1D212C;
  --daBk: #1D212C;
  --daCl: #EFEFEF; 
  --background: var(--liBk);
  --color: var(--liCl);
 }
.wrapper {  
background: var(--background);  
color: var(--color); 
}
#dark-mode ~ .wrapper {
  --background: var(--liBk);
  --color: var(--liCl);
 }
#dark-mode:checked ~ .wrapper {
  --background: var(--daBk);
  --color: var(--daCl);
 }

label {position:fixed;right:2ch;top:2ch;cursor:pointer;z-index:1; background: #DCDCDC; color: #000; border-radius: .3rem;padding: .2rem;}
label:hover {opacity:1}
label::before {content:"🌜 Dark"}
#dark-mode:checked~label::before {content:"🌞 Light"}
#dark-mode {display:none}

Soluția tehnică am descoperit-o aici, a durat puțin până să îmi dau seama ce/cum funcționează și cum o pot adapta pentru Zola și site-ul meu.