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