Stylepack

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

airbnb.com

Zmierzono 4 dni temu.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff
globals.css
/* shadcn/ui theme measured from airbnb.com. Values are hex; shadcn's CSS accepts them as they are. */
:root {
  --background: #ffffff;
  --foreground: #222222;
  --card: #dddddd;
  --card-foreground: #222222;
  --popover: #dddddd;
  --popover-foreground: #222222;
  --primary: #da1249;
  --primary-foreground: #ffffff;
  --secondary: #f2f2f2;
  --secondary-foreground: #222222;
  --muted: #dddddd;
  --muted-foreground: #6c6c6c;
  --accent: #da1249;
  --accent-foreground: #ffffff;
  --border: #ffffff;
  --input: #ffffff;
  --ring: #da1249;
  --radius: 100px;
}
Otwórz pełną stronę z odpowiedziąOtwórz pakiet designu

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ń.