universal-theme
Jednolity system motywów dla aplikacji na iOS, Android i web — automatyczne dostosowanie do preferencji systemu
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Universal Theme to umiejętność konfiguracji obsługi motywów jasnych, ciemnych i systemowych w projektach Expo z uniwersalnym CSS. Narzędzie wykorzystuje CSS color-scheme do automatycznego wykrywania preferencji systemu, klasy .light/.dark do ręcznego przełączania motywu (wzór shadcn/ui) oraz React Native Appearance API do kontroli motywu na platformach natywnych. Obsługuje persystencję preferencji w localStorage, synchronizację między kartami przeglądarki i zapobiega błyskom nieprawidłowego motywu podczas ładowania strony. Idealne dla projektów opartych na Tailwind v4 i react-native-css.
Jak używać
- Zainstaluj umiejętność w swoim projekcie Expo, dodając katalog universal-theme do folderu .claude/skills w repozytorium.
- Skonfiguruj plik CSS (np. src/css/sf.css), ustawiając color-scheme: light dark na elemencie html w warstwie @layer base — to włączy automatyczne przełączanie na podstawie preferencji systemu.
- Dodaj reguły CSS dla klas .light i .dark na elemencie html, aby wymusić konkretny motyw: html.light { color-scheme: light; } i html.dark { color-scheme: dark; }.
- Wykorzystaj funkcję CSS light-dark() do definiowania zmiennych CSS, które automatycznie przełączają kolory w zależności od rozpoznanego schematu kolorów.
- Wdrażaj ThemeContextProvider w aplikacji React, aby zarządzać stanem motywu i synchronizować preferencje między platformami — kontekst będzie obsługiwać localStorage do persystencji i React Native Appearance API na urządzeniach natywnych.
- Dodaj ThemeScript jako inline skrypt w head dokumentu HTML, aby zapobiec błyskom nieprawidłowego motywu (FOUC) podczas ładowania strony — skrypt powinien ustawić odpowiednią klasę na html przed renderowaniem treści.