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
linear.app
Zmierzono 4 dni temu.
/* shadcn/ui theme measured from linear.app. Values are hex; shadcn's CSS accepts them as they are. */
:root {
--background: #08090a;
--foreground: #f7f8f8;
--card: #101112;
--card-foreground: #f7f8f8;
--popover: #101112;
--popover-foreground: #f7f8f8;
--primary: #e5e5e6;
--primary-foreground: #111111;
--secondary: #1c1d1e;
--secondary-foreground: #f7f8f8;
--muted: #101112;
--muted-foreground: #8a8f98;
--accent: #5e6ad2;
--accent-foreground: #111111;
--border: #1c1d1e;
--input: #1c1d1e;
--ring: #e5e5e6;
--radius: 9999px;
}
.dark {
--background: #08090a;
--foreground: #f7f8f8;
--card: #101112;
--muted: #101112;
--muted-foreground: #8a8f98;
--border: #1c1d1e;
--input: #1c1d1e;
}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ń.