Wykorzystanie zmiennych CSS do dynamicznej zmiany motywu strony

W web development elastyczność i dynamika designu mają ogromne znaczenie. Zmienne CSS (CSS Variables) są potężnym narzędziem do efektywnego manipulowania stylami, które pozwalają łatwo i szybko zmieniać temat strony.

Czym są zmienne CSS?

Zmienne CSS lub CSS Variables to sposób na przechowywanie wartości właściwości CSS w zmiennych. Są one zapisywane w formacie --nazwa-zmiennej, a używane za pomocą var(--nazwa-zmiennej). Daje to programistom możliwość oszczędzania czasu i wysiłku przy zmianach stylów, zmniejszając duplikację kodu.

:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
}

body {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

Dynamiczna zmiana tematu strony

Stworzenie dynamicznego tematu za pomocą zmiennych CSS jest nie tylko wygodne, ale i dość proste. W tym celu należy zmieniać wartości zmiennych w zależności od wybranego tematu, na przykład jasnego lub ciemnego.

Praktyczny przykład

1. Ustawić domyślne wartości dla zmiennych:

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

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

1. Określić alternatywne schematy kolorów:

[data-theme="dark"] {
  --bg-color: #333333;
  --text-color: #ffffff;
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
}

1. Przełączanie tematu za pomocą JavaScript:

const toggleTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
};

document.getElementById('theme-switcher').addEventListener('click', toggleTheme);

Ten skrypt zmienia atrybut data-theme na elemencie html podczas kliknięcia przycisku o ID theme-switcher.

Zalety używania zmiennych CSS

• Łatwość utrzymania: Możliwość zmiany tematu bez dużego wysiłku.
• Zmniejszenie duplikacji kodu: Raz zdefiniować zmienną — i jest dostępna w całym pliku CSS.
• Lepsza struktura: Zmienne CSS pomagają uczynić kod czystszy i łatwiejszy do zrozumienia.
• Dynamika i interaktywność: Łatwe wykorzystanie JavaScript do dynamicznej zmiany tematów.