CSS Custom Properties — Zmienne dla Dynamicznych Motywów
Jak używać zmiennych CSS do zarządzania kolorami. Omówienie fallbacków, dziedziczenia i integracji z JavaScriptem dla płynnych przejść między motywami.
Dlaczego zmienne CSS zmieniają gę?
Przed zmiennymi CSS — właśnie custom properties — każda zmiana koloru w trybie jasnym wymagała edycji kilkunastu miejsc w kodzie. Szukałeś tekstu #333333, zamieniałeś na #ffffff, i modliłeś się, żeby nic się nie złamało.
Dziś? Zmienisz jedną zmienną. I gotowe. Cały motyw się zmienia — napisy, tła, obramowania, wszystko. To jest siła CSS custom properties. Nie są nowe — istnieją od 2015 roku — ale wciąż wiele zespołów ich nie używa. A to błąd.
W tym artykule pokażemy jak dokładnie działają zmienne CSS. Nauczysz się nie tylko składni, ale też jak je kombinować z JavaScriptem, aby czytać preferencje użytkownika i przełączać motywy bez przeładowania strony.
Podstawy: Jak się definiuje zmienne CSS?
Zmienne CSS definiujesz w :root — to najwyższy poziom dokumentu, więc zmienne będą dostępne wszędzie. Zaczynasz od dwóch myślników, potem nazwa zmiennej (małe litery, myślniki zamiast spacji), potem wartość.
Oto przykład. W :root piszesz:
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--spacing-md: 1.5rem;
}
A potem gdziekolwiek w CSS używasz var(–color-bg) i wartość się podstawi. Proste. Ale czekaj — najlepsza część to dziedziczenie. Zmienne dziedziczą się jak właściwości CSS, ale możesz je przesłonić na głębszych poziomach DOM.
Dziedziczenie zmiennych — mniej kodu niż myślisz
Powiedzmy że definiujesz zmienne w :root. Każdy element w HTML może ich użyć. Ale czasami chcesz zmienić wartość dla konkretnego obszaru. Dla tego elementu i jego dzieci.
Przykład: masz kartę (card). Chcesz że w karcie tekst będzie jaśniejszy. Zamiast edytować wszystkie paragrafy wewnątrz karty — definiujesz zmienną na samej karcie:
.card {
--color-text: #666666;
}
p {
color: var(--color-text);
}
Każdy p wewnątrz .card będzie używał #666666. Każdy p poza kartą będzie używał domyślnej wartości z :root. Dziedziczenie działa. Bez żadnych dodatkowych selektorów.
Fallback — ubezpieczenie na wypadek błędu
Czego się bać? Że zmienna nie będzie zdefiniowana. Lub że JavaScript przypadkiem ją usunie. Dlatego każdy var() może mieć fallback — drugą wartość, którą przeglądarka użyje jeśli zmienna nie istnieje.
Składnia: var(–zmienna, fallback). Po przecinku piszesz co chcesz, aby się stało jeśli zmienna nie będzie dostępna:
color: var(--color-text, #333333);
background: var(--color-bg, white);
padding: var(--spacing, 1rem);
To robi Twoją stronę bardziej niezawodną. Nawet jeśli coś pójdzie nie tak z JavaScriptem — strona wciąż będzie czytelna. Fallback może być kolor, rozmiar, wymiary — cokolwiek.
Integracja z JavaScriptem — zmienne na sterydach
To jest gdzie zmienne CSS robi się naprawdę interesujące. Możesz je czytać i zmieniać z JavaScriptem. Żaden framework nie potrzebny — czysty JS.
Chcesz czytać wartość zmiennej? Używasz getComputedStyle():
const root = document.documentElement;
const bgColor = getComputedStyle(root)
.getPropertyValue('--color-bg');
console.log(bgColor);
Chcesz zmienić wartość? Używasz setProperty():
root.style.setProperty('--color-bg', '#1a1a1a');
root.style.setProperty('--color-text', '#ffffff');
I to jest wszystko. Nie musisz przeładowywać strony. CSS się automatycznie przelicza dla wszystkich elementów używających tych zmiennych. Przełącznik motywów można zrobić w 10 linijkach kodu.
Praktyka: Budowanie przełącznika motywów
Teraz łączymy wszystko razem. Pokażemy dokładnie jak zrobić przełącznik jasno-ciemny używając zmiennych CSS i JavaScript.
Zdefiniuj dwa zestawy zmiennych
W CSS piszesz :root dla jasnego motywu, potem html[data-theme=”dark”] dla ciemnego. Każdy zestaw ma swoje kolory — tyle samo zmiennych, inne wartości.
Przechowaj preferencję użytkownika
Użyj localStorage aby zapamiętać czy użytkownik wolą ciemny czy jasny motyw. Gdy wrócą, motyw będzie dokładnie taki sam jak ostatnio.
Czytaj systemową preferencję
Media query prefers-color-scheme mówi ci czy użytkownik ma włączony ciemny motyw w systemie. To jest punkt wyjścia — domyślny motyw zanim użytkownik cokolwiek kliknie.
Dodaj przełącznik w HTML
Przycisk lub switch element który zmienia atrybut data-theme na HTML. JavaScript słucha kliknięcia i zmienia wartość atrybutu.
Kontrast i dostępność — nie żart
Zmienne CSS to świetna okazja aby się nie pomylić z kontrastem. Definiujesz kolory raz — w :root. Potem je używasz wszędzie. Jeśli będą miały kontrast 4.5:1 w :root, będą mieć go wszędzie.
Czysty motyw jasny:
:root {
--color-text: #1a1a1a;
--color-bg: #ffffff;
}
Czysty motyw ciemny:
html[data-theme="dark"] {
--color-text: #f1f5f9;
--color-bg: #0f172a;
}
Pamiętaj: kontrast mierzymy między tekstem a tłem. W jasnym motywie — ciemny tekst na jasnym tle. W ciemnym — jasny tekst na ciemnym tle. Nie mieszaj. Sprawdzaj za pomocą narzędzi typu WebAIM Contrast Checker.
Czemu wciąż to zignorujesz?
CSS custom properties istnieją od ponad dekady. Obsługiwane przez wszystkie przeglądarki. Są proste. Zmniejszają kod. Robią przełącznik motywów trywialnym. A jednak wiele zespołów pisze kolor na sztywno — #ffffff tu, #1a1a1a tam, bez zmiennych.
Nie bądź tym zespołem. Zacznij dzisiaj. Zdefiniuj zmienne w :root. Używaj ich wszędzie. Dodaj JavaScript który je zmienia. To zajmie ci godzinę. Może dwie jeśli chcesz to zrobić dobrze — z fallbackami, z localStorage, z czytaniem systemowych preferencji.
Rezultat? Strona która się przełącza między motywami bez przeładowania. Użytkownik widzi natychmiast zmianę. Kod jest czytelny i łatwo się go utrzymuje. I kontrast zawsze będzie prawidłowy bo definiujesz go raz.
To jest to. Zmienne CSS. Proste, ale potężne. Zrób to.
“CSS custom properties to najlepszy feature CSS który został dodany w ostatniej dekadzie. Nie dlatego że są skomplikowane — dlatego że są proste. Mogą być wszędzie. Mogą być zmieniane w locie. To zmienia sposób myślenia o designie.”
— Opinia deweloperów pracujących z motywami dynamicznymi
Uwaga edukacyjna
Ten artykuł zawiera informacje edukacyjne na temat CSS custom properties i zarządzania motywami. Przykłady kodu są uproszczone do celów nauki. W rzeczywistych projektach musisz testować kompatybilność przeglądarek, wydajność i dostępność dla Twoich użytkowników. Każda implementacja może wymagać dostosowań zależnie od konkretnych wymagań projektu i zespołu.
