U
universal-theme
Configure light/dark/system theme handling across iOS, Android, and Web with universal CSS
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Configure light/dark/system theme handling across iOS, Android, and Web with universal CSS
How to use
- 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.