dark-mode
Generuj warianty dark mode dla komponentów za pomocą AI – bez ręcznego pisania stylów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Narzędzie skanuje Twoje komponenty i automatycznie generuje CSS lub klasy Tailwind dla trybu ciemnego. Obsługuje plain CSS, Tailwind i CSS-in-JS. Wystarczy wskazać plik – otrzymasz gotowy kod do wklejenia. Idealne do dodawania dark mode do istniejących projektów lub budowania nowych komponentów z obsługą obu motywów. Nie wymaga konfiguracji.
Jak używać
Zainstaluj narzędzie uruchamiając polecenie npx ai-dark-mode z linii poleceń. Nie potrzebujesz dodatkowej konfiguracji – wszystko działa od razu.
Wskaż plik komponentu, dla którego chcesz wygenerować dark mode. Przykład: npx ai-dark-mode ./src/components/Button.tsx. Narzędzie przeskanuje istniejące style i kolory w komponencie.
Wybierz format wyjścia zależnie od Twojego projektu. Użyj flagi --format tailwind dla klas Tailwind dark:, lub --format css-vars dla zmiennych CSS. Jeśli pracujesz z plain CSS, domyślny format będzie odpowiedni.
Przejrzyj wygenerowany kod. Narzędzie tworzy warianty dark mode, które pasują do Twojej palety kolorów i systemu designu, ale zawsze sprawdź kontrast i dostępność ręcznie.
Skopiuj wygenerowany kod do swojego projektu. Jeśli przetwarzasz wiele komponentów, użyj flagi --recursive: npx ai-dark-mode ./src/components/ --recursive.
Przetestuj tryb ciemny w przeglądarce, aby upewnić się, że wszystkie elementy wyglądają dobrze w obu motywach. Zwróć szczególną uwagę na głębię i kontrast elementów.