Stylepack

Ferramentas

Tema shadcn/ui de qualquer site

Digite o endereço de um site e receba o design dele como as variáveis CSS que o shadcn/ui lê: background, foreground, primary, secondary, muted, accent, border, ring e radius.

Experimentestripe.comlinear.appairbnb.com

linear.app

Medido há 4 dias.

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;
}
Abrir a página completa da respostaAbrir o pacote de design

Como funciona

O Stylepack abre o site em um navegador de verdade, mede o que é renderizado (não o que a folha de estilos diz) em quatro larguras e nos dois temas, e guarda o resultado como um pacote de design. Um site já medido responde na hora; um novo leva menos de um minuto. Todo valor nesta página vem desse pacote.

Perguntas

Como as variáveis do shadcn são preenchidas?

Cada cor medida tem uma função (background, foreground, primary, on-primary, surface, muted-foreground, border); as variáveis são preenchidas a partir dessas funções, com o destaque como --primary e --ring e o raio do botão como --radius.

Preciso converter os valores?

Não. O CSS do shadcn/ui aceita valores hex como estão. Se a sua configuração usa oklch ou hsl, converta com a sua ferramenta de costume ou mantenha o hex.

E o tema escuro?

Quando o site tem um tema escuro, o resultado adiciona um bloco .dark com os valores escuros medidos para background, foreground, superfícies e bordas.