Zarządzanie motywami i trybem dark/light

Jednym z najczęstszych zastosowań zmiennych CSS na dużą skalę jest tworzenie tzw. motywów kolorystycznych – czyli np. jasnego i ciemnego trybu interfejsu. Dzięki custom properties możemy zdefiniować wszystkie kolory w jednym miejscu i dynamicznie zmieniać je np. przez dodanie klasy do <body>.

Definiowanie zmiennych globalnych

Zmienną CSS deklarujemy w bloku :root, czyli na najwyższym poziomie drzewa DOM:

:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-primary: #0057ff;
}

Możemy teraz używać tych zmiennych w dowolnym miejscu stylów:

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

.button {
  background-color: var(--color-primary);
  color: #fff;
}

Dodanie trybu ciemnego (dark mode)

Aby zmienić motyw, wystarczy nadpisać wartości zmiennych – np. przez klasę .dark dodaną do <body>:

body.dark {
  --color-bg: #121212;
  --color-text: #eeeeee;
  --color-primary: #3399ff;
}

Co ważne – nie musimy zmieniać stylów komponentów. One korzystają z tych samych zmiennych, a ich wartości są po prostu nadpisywane w innym kontekście.

Pełen przykład działania

<body class="dark">
  <article class="card">
    <h2>Tytuł karty</h2>
    <p>To przykładowa treść karty.</p>
    <button class="button">Zobacz więcej</button>
  </article>
</body>

:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-primary: #0057ff;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: sans-serif;
}

body.dark {
  --color-bg: #121212;
  --color-text: #eeeeee;
  --color-primary: #3399ff;
}

.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-primary);
  padding: 1rem;
  border-radius: 8px;
}

.button {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
}

Możesz zobaczyć i przetestować działanie tego motywu, usuwając lub dodając klasę dark na <body>.

Dobre praktyki

Zawsze definiuj kolory globalnie – w :root lub w klasie motywu
Nie używaj wartości HEX bezpośrednio w komponentach – tylko var()
Trzymaj wszystkie zmienne motywów w jednym miejscu – np. osobnym pliku lub warstwie ITCSS
Stosuj przełącznik (JavaScript, preferencje systemowe) tylko do zmiany klasy – nie manipuluj stylem inline

Ćwiczenie

Stwórz własny komponent „baneru” (.banner) zawierający:

nagłówek i tekst,
kolory w pełni oparte na zmiennych,
dwa motywy: jasny (domyślny) i ciemny (po dodaniu klasy dark),
zmienne zdefiniowane tylko raz – nadpisywane w motywie, nie w komponentach.

Dla chętnych: dodaj dodatkowy motyw np. blue, który zmienia tylko --color-primary.

Wniosek

Zarządzanie motywami za pomocą zmiennych CSS to najprostszy sposób na tworzenie skalowalnych i elastycznych interfejsów. Dzięki podejściu „zmienne + klasy”, cały styl komponentów pozostaje niezmienny – zmienia się tylko kontekst, w którym działają. To oszczędza czas, redukuje błędy i pozwala tworzyć nowoczesne systemy designu.

Previous Zagadnienie

Back to Zagadnienie

Next Temat