config.cafe
Wróć do bloga

Tryb ciemny — dlaczego warto go dodać

Tryb ciemny to nie tylko estetyka — to kwestia dostępności i komfortu użytkownika. Pokazuję jak łatwo zaimplementować przełącznik motywu na stronie.

Tryb ciemny — dlaczego warto go dodać

Coraz więcej stron internetowych oferuje tryb ciemny. Czy to tylko moda, czy jest w tym głębszy sens?

Zalety trybu ciemnego

  1. Mniejsze zmęczenie oczu — szczególnie podczas pracy nocą
  2. Oszczędność baterii — na ekranach OLED każdy ciemny piksel to mniej prądu
  3. Dostępność — niektórzy użytkownicy preferują ciemne tła ze względów zdrowotnych

Jak zaimplementować przełącznik?

Najprościej za pomocą klasy na elemencie <html> i localStorage:

function toggleTheme() {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

Wniosek

Dodanie trybu ciemnego to kilka linii kodu, a komfort użytkownika znacząco rośnie. Zdecydowanie warto!