Jak stworzyć i skonfigurować ciemny motyw za pomocą zmiennych CSS

Temna tematyka stała się popularna wśród użytkowników dzięki swojej zdolności do zmniejszania obciążenia oczu, szczególnie w warunkach słabego oświetlenia. Dzięki zmiennym CSS tworzenie i dostosowywanie ciemnej tematyki stało się znacznie prostsze. Pozwala to programistom łatwo zarządzać schematami kolorów bez konieczności ponownego pisania stylów dla każdego elementu.

Zmienne CSS: Podstawy

Zmienne CSS, znane również jako właściwości niestandardowe, pozwalają na przechowywanie wartości w zmiennych, które można następnie używać w stylach. Są one definiowane za pomocą dwóch myślników przed nazwą zmiennej, na przykład --primary-color. Jest to szczególnie przydatne do tworzenia motywów, ponieważ wszystkie wartości kolorów można przechowywać w jednym miejscu i łatwo zmieniać.

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

W tym przykładzie ogłaszamy dwie zmienne: --background-color i --text-color, które definiują paletę kolorów dla jasnej tematyki.

Tworzenie ciemnej tematyki

Aby stworzyć ciemną tematykę, możemy zdefiniować inny zestaw zmiennych, które będą używane przy aktywacji ciemnej tematyki. Umożliwia to łatwe przełączanie się między motywami, zmieniając tylko wartości zmiennych.

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.dark-theme {
  --background-color: #333333;
  --text-color: #ffffff;
}

Teraz, gdy klasa dark-theme jest dodawana do elementu body, kolory zmieniają się zgodnie z określonymi zmiennymi dla ciemnej tematyki.

Dostosowywanie motywu za pomocą JavaScript

Aby dynamicznie przełączać się między jasnym a ciemnym motywem, można użyć JavaScript. Umożliwia to użytkownikom samodzielny wybór preferowanego motywu.

const toggleThemeButton = document.querySelector('#toggle-theme');
toggleThemeButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

W tym przykładzie, po naciśnięciu przycisku z identyfikatorem toggle-theme, klasa dark-theme jest dodawana lub usuwana z elementu body, aktywując odpowiednią tematykę.

Dodatkowe ustawienia

Można również dodać zapis wyboru motywu użytkownika w localStorage, aby zachować ustawienia nawet po przeładowaniu strony. Poprawia to doświadczenie użytkownika, zachowując indywidualne ustawienia.

const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
  document.body.classList.add(currentTheme);
}

toggleThemeButton.addEventListener('click', () => {
  document.body.classList.toggle(dark-theme');
  const theme = document.body.classList.contains(dark-theme) ? dark-theme: light-theme;
  localStorage.setItem(theme, theme);
});

Teraz po przeładowaniu strony wybrany przez użytkownika motyw będzie automatycznie stosowany. Dostosowanie ciemnej tematyki za pomocą zmiennych CSS i JavaScript jest prostym i skutecznym sposobem na poprawę interfejsu strony internetowej.