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.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111
globals.css
/* 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ń.