dark-mode-gen
Automatycznie dodaj tryb ciemny do komponentów React bez ręcznej edycji stylów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Narzędzie generuje warianty ciemnego motywu dla twoich komponentów React w jednej komendzie. Obsługuje zmienne CSS, Tailwind i styled-components, automatycznie dodając style na podstawie prefers-color-scheme. Nie wymaga konfiguracji — wystarczy npx i klucz API OpenAI. Idealne do szybkiego dodania dark mode do istniejących projektów lub standaryzacji implementacji w całej bazie kodu.
Jak używać
Upewnij się, że masz zainstalowany Node.js 18 lub nowszy oraz ustawioną zmienną środowiskową OPENAI_API_KEY z kluczem do API OpenAI.
Uruchom narzędzie dla pojedynczego pliku komponentu, podając ścieżkę do pliku: npx ai-dark-mode ./src/components/Card.tsx. Narzędzie przeanalizuje plik, zidentyfikuje definicje kolorów i style, a następnie automatycznie doda odpowiednie warianty dla trybu ciemnego.
Jeśli chcesz przetworzyć całą strukturę katalogów, podaj ścieżkę do folderu zamiast pojedynczego pliku: npx ai-dark-mode ./src/components/. Wszystkie komponenty w katalogu zostaną zaktualizowane.
Przed zapisaniem zmian na dysku możesz podejrzeć proponowane zmiany, dodając flagę --dry-run: npx ai-dark-mode ./src/components/Card.tsx --dry-run. To pozwoli ci sprawdzić wynik bez modyfikacji oryginalnych plików.
Po wygenerowaniu stylów dark mode przetestuj oba motywy w przeglądarce, zwracając szczególną uwagę na kontrast tekstu i czytelność. Pamiętaj, że niektóre grafiki mogą wymagać osobnych wariantów dla trybu jasnego i ciemnego.
Aby uzyskać pełną listę dostępnych opcji i dodatkowych flag, uruchom npx ai-dark-mode --help.