Zmienne CSS do obsługi motywów
Utwórz oparty na tokenach system motywów, używając niestandardowych właściwości CSS, które przełączają wartości jasne i ciemne.
Zmienne CSS do obsługi motywów to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Przegląd architektury motywów
Własne właściwości CSS stanowią podstawę nowoczesnego tworzenia motywów w CSS. Działają jak dynamiczna warstwa tokenów, którą można zamieniać w czasie działania — umożliwiając obsługę trybu ciemnego, produktów white-label i personalizacji sterowanej przez użytkownika.
Warstwy tokenów projektowych
Dobrze uporządkowany system motywów ma trzy warstwy:
- Tokeny prymitywne: surowe wartości (
--blue-500: #3b82f6) - Tokeny semantyczne: oparte na znaczeniu (
--color-primary: var(--blue-500)) - Tokeny komponentów: właściwe dla komponentu (
--button-bg: var(--color-primary))
Definiowanie jasnego motywu
Kompletny jasny motyw należy zdefiniować w :root:
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
Nadpisywanie ciemnego motywu
Tokeny należy nadpisać w zakresie ciemnego motywu, na przykład w zapytaniu medialnym lub klasie:
<div class="demo">Adapts to dark mode automatically</div>
Używanie tokenów w komponentach
Komponenty powinny używać tokenów semantycznych, nigdy zaś wartości wpisanych na stałe:
<div class="card">Card using theme tokens</div>
Nadpisywanie za pomocą klasy
Ręczne nadpisywanie można umożliwić za pomocą klasy na elemencie <html>:
<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>
Tworzenie motywów na poziomie komponentu
Komponent może definiować własną warstwę tokenów, aby umożliwić dokładniejszą personalizację:
<div class="card">Component-level theming</div>
Motywy white-label
Zmienne CSS umożliwiają tworzenie produktów white-label, w których każdy klient otrzymuje inny motyw dzięki nadpisaniu niewielkiego zestawu tokenów marki:
<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>
Płynne zmiany motywu
Płynne przejścia między motywami można uzyskać za pomocą przejścia CSS dotyczącego właściwości związanych z kolorami:
<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>
Dokumentowanie tokenów
Należy dokumentować tokeny projektowe, aby wszyscy programiści wiedzieli, których zmiennych używać. Komponent przewodnika po stylach, taki jak Storybook, wyświetlający wszystkie tokeny wraz z ich wartościami dla jasnego i ciemnego motywu, jest nieoceniony w dużych zespołach.
Narzędzia do tokenów: Style Dictionary
Style Dictionary (firmy Amazon) automatycznie przekształca tokeny projektowe zdefiniowane w formacie JSON we własne właściwości CSS, stałe JavaScriptu i formaty innych platform — dzięki temu tokeny pozostają zsynchronizowane w projekcie i kodzie.
Szybkie sprawdzenie
Do jakiego typu tokenu powinien odwoływać się komponent .button w architekturze tokenów z dwoma poziomami, aby określić kolor tła?
Podsumowanie
Zmienne CSS umożliwiają tworzenie solidnych systemów motywów. Należy utworzyć trzy warstwy: tokeny prymitywne, tokeny semantyczne i tokeny komponentów. Motywy należy definiować jako nadpisania tokenów na poziomie :root, za pomocą zapytania medialnego lub selektora atrybutu. W komponentach należy używać tokenów semantycznych, aby automatycznie dziedziczyć motyw. Narzędzia takie jak Style Dictionary automatyzują dystrybucję tokenów na różnych platformach.
Często zadawane pytania
Czy lekcja „Zmienne CSS do obsługi motywów” jest bezpłatna?
Tak — pełny tekst „Zmienne CSS do obsługi motywów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zmienne CSS do obsługi motywów”?
Utwórz oparty na tokenach system motywów, używając niestandardowych właściwości CSS, które przełączają wartości jasne i ciemne. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Zmienne CSS do obsługi motywów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Zapytanie medialne prefers-color-scheme
- Zmienne CSS do obsługi motywów
- Właściwość color-scheme
- Automatyczne i ręczne przełączanie trybu ciemnego