Narzędzia
Motyw shadcn/ui z dowolnej strony
Wpisz adres strony i pobierz jej design jako zmienne CSS, które czyta shadcn/ui: background, foreground, primary, secondary, muted, accent, border, ring i radius.
Wypróbujstripe.comlinear.appairbnb.com
Jak to działa
Stylepack otwiera stronę w prawdziwej przeglądarce, mierzy to, co się renderuje (a nie to, co mówi arkusz stylów) w czterech szerokościach i w obu motywach, a wynik zapisuje jako pakiet designu. Strona już zmierzona odpowiada od razu; nowa zajmuje mniej niż minutę. Każda wartość na tej stronie pochodzi z tego pakietu.
Pytania
Jak wypełniane są zmienne shadcn?
Każdy zmierzony kolor ma rolę (background, foreground, primary, on-primary, surface, muted-foreground, border); zmienne są wypełniane z tych ról, z akcentem jako --primary i --ring oraz zaokrągleniem przycisku jako --radius.
Czy muszę konwertować wartości?
Nie. CSS shadcn/ui przyjmuje wartości hex takie, jakie są. Jeśli Twoja konfiguracja używa oklch lub hsl, przekonwertuj je swoim zwykłym narzędziem albo zostaw hex.
A co z ciemnym motywem?
Gdy strona ma ciemny motyw, wynik dodaje blok .dark ze zmierzonymi ciemnymi wartościami tła, tekstu, powierzchni i obramowań.