Implementowanie obsługi wielu marek za pomocą zmiennych CSS

Motywy wielu marek mapują jeden zestaw tokenów aliasów komponentów na różne wartości tokenów globalnych dla poszczególnych marek. Komponenty odwołują się do tokenów aliasów, a pliki motywów marek mapują aliasy na wartości globalne specyficzne dla danej marki.

Zdefiniuj tokeny globalne w :root: wszystkie surowe wartości kolorów, odstępów i typografii. Jest to domyślna marka. Komponenty nigdy nie odwołują się bezpośrednio do tokenów globalnych — zawsze korzystają z aliasów.

Tokeny aliasów odwołują się do tokenów globalnych za pomocą var(): --color-action: var(--color-brand-primary). Komponenty używają --color-action. Zmiana znaczenia --color-brand-primary zmienia cały system.

Motywy marek stosuje się za pomocą klasy na elemencie html lub kontenerze. Każda klasa motywu nadpisuje tokeny globalne w zakresie danej marki. Komponenty znajdujące się w kontenerze automatycznie dziedziczą wartości marki.

Tryb ciemny jest wariantem motywu — klasą lub zapytaniem o media, które nadpisuje tokeny kolorów. Użyj prefers-color-scheme dla domyślnego ustawienia systemu operacyjnego oraz klasy .dark jako nadpisania wybranego przez użytkownika. Oba rozwiązania zmieniają te same tokeny aliasów.

Niestandardowe właściwości CSS podlegają kaskadowaniu i dziedziczeniu. Motyw zastosowany do elementu kontenera wpływa na wszystkich jego potomków. Zagnieżdżone motywy nadpisują motywy zewnętrzne na poziomie kontenera — jest to przydatne przy stosowaniu różnych motywów widżetu osadzonego na stronie.

Upewnij się, że tokeny aliasów są zawsze zdefiniowane. Jeśli brakuje klasy motywu, alias powinien bezpiecznie powrócić do wartości domyślnej. Użyj składni wartości zapasowej CSS var(): var(--color-action, #3b82f6), aby zapobiec niewidocznemu tekstowi lub brakującym tłom.

Style Dictionary może generować osobne pliki CSS motywów na podstawie tokenów w formacie JSON. Etap budowania generuje pliki theme-brand-a.css i theme-brand-b.css. Wczytaj odpowiedni plik w czasie działania aplikacji albo skompiluj go do osobnych bundli dla każdej marki.

Napisz testy regresji wizualnej, które renderują każdy komponent w każdym motywie. Percy i Chromatic wykonują zrzuty ekranu dla każdego wariantu motywu. Automatyczne testy wizualne wykrywają regresje, gdy wartości tokenów globalnych nieoczekiwanie się zmieniają.

Przełączaj klasy motywów za pomocą JavaScriptu: document.documentElement.classList.replace("theme-a", "theme-b"). Zmienne CSS aktualizują się natychmiast bez ponownego renderowania komponentów — nie jest potrzebne ponowne renderowanie React ani ponowne obliczanie statycznych wartości stylów.

Zmienne CSS są rozwiązywane podczas malowania — zmiana zmiennej głównej wywołuje ponowne malowanie wszystkich elementów, które jej używają. Ograniczaj zmiany zmiennych globalnych do interakcji użytkownika, takich jak przełączanie motywu, zamiast wykonywać je w pętlach animacji. Do animowanych efektów zmiany motywu używaj przejść poszczególnych właściwości.

W jaki sposób motywy oparte na niestandardowych właściwościach CSS umożliwiają przełączanie marek bez zmiany CSS komponentów?

Motywy wielu marek oddzielają surowe wartości tokenów globalnych od semantycznych tokenów aliasów. Klasy motywów nadpisują tokeny globalne w zakresie kontenera. Komponenty odwołujące się do aliasów automatycznie odzwierciedlają aktywny motyw marki, co umożliwia przełączanie w czasie działania bez zmian w kodzie komponentów.