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

stripe.com

Zmierzono 4 dni temu.

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff
globals.css
/* shadcn/ui theme measured from stripe.com. Values are hex; shadcn's CSS accepts them as they are. */
:root {
  --background: #ffffff;
  --foreground: #061b31;
  --card: #e5edf5;
  --card-foreground: #061b31;
  --popover: #e5edf5;
  --popover-foreground: #061b31;
  --primary: #533afd;
  --primary-foreground: #ffffff;
  --secondary: #ffe0ef;
  --secondary-foreground: #061b31;
  --muted: #e5edf5;
  --muted-foreground: #64748d;
  --accent: #0f4d29;
  --accent-foreground: #ffffff;
  --border: #e5edf5;
  --input: #e5edf5;
  --ring: #533afd;
  --radius: 4px;
}
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ń.