dark-mode-gen
Add dark mode support to components. Use when implementing dark theme.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Add dark mode support to components. Use when implementing dark theme.
How to use
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.