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. Umożliwia to programistom łatwe zarządzanie schematami kolorów bez konieczności ponownego pisania stylów dla każdego elementu.
CSS Variables: Podstawy
CSS Variables, znane również jako właściwości niestandardowe, pozwalają na przechowywanie wartości w zmiennych, które następnie można wykorzystać w stylach. Są 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 między tematami, 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 tematyki za pomocą JavaScript
Aby dynamicznie przełączać się między jasną a ciemną tematyką, można użyć JavaScript. Umożliwia to użytkownikom samodzielne wybieranie preferowanej tematyki.
const toggleThemeButton = document.querySelector('#toggle-theme');
toggleThemeButton.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
W tym przykładzie, po naciśnięciu przycisku o identyfikatorze toggle-theme, klasa dark-theme jest dodawana lub usuwana z elementu body, aktywując odpowiednią tematykę.
Dodatkowe ustawienia
Można również dodać zapisywanie wyboru tematyki 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 wybrana przez użytkownika tematyka zostanie automatycznie zastosowana. Dostosowanie ciemnej tematyki za pomocą zmiennych CSS i JavaScript jest prostym i skutecznym sposobem na poprawę interfejsu strony internetowej.
```