9 Sty 2020

Ciemny/Jasny motyw na stronie

Coraz więcej programów ale również i stron posiada motyw ciemny. Nie będę tutaj się zajmował tym czy i dlaczego używać ciemnego motywu. Takie informacje Sami jesteście wstanie znaleźć w internecie.
Dla mnie ciemny motyw jest idealny do pracy, mniej męczy oczy, jest też część techniczna bo ciemny motyw na urządzeniach OLED czy AMOLED nie zużywa energii itd.
Tak naprawdę to nie jest istotne czy strona jest jasna czy ciemna ale to jaki jest kontrast między elementami tło/tekst.

Przejdźmy do konkretów. Strona będzie posiadała przełącznik między ciemnym/jasnym motywem. Dane będą zapisywane w localStorage, a to po to aby po odświeżeniu strony nasz wybór nadal był aktualny. Oczywiście nic nie stoi na przeszkodzie aby gdzie indziej zapisywać te informacje.

Nie chcemy aby po wybraniu ciemnego motywu i po przejściu na inną stronę motyw z powrotem zmienił się na jasny. Domyślnie strona jest w motywie jasnym, dopiero kliknięcie na przełącznik zmienia nam motyw.

Najpierw porcja prostego html. Zaczniemy od przełącznika.

<nav>
  <div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="slider round"></div>
    </label>
  </div>
</nav>