Araçlar
Herhangi bir web sitesinden shadcn/ui teması
Bir web sitesi adresi girin ve tasarımını shadcn/ui tarafından okunan CSS değişkenleri olarak alın: background, foreground, primary, secondary, muted, accent, border, ring ve radius.
airbnb.com
4 gün önce ölçüldü.
/* 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;
}Nasıl çalışır
Stylepack siteyi gerçek bir tarayıcıda açar, dört genişlikte ve iki temada ekranda ne render edildiğini ölçer (stil dosyasının ne dediğini değil) ve sonucu bir tasarım paketi olarak saklar. Daha önce ölçülmüş bir site anında cevap verir; yeni bir site bir dakikadan kısa sürer. Bu sayfadaki her değer o paketten gelir.
Sorular
shadcn değişkenleri nasıl dolduruluyor?
Ölçülen her rengin bir rolü var (background, foreground, primary, on-primary, surface, muted-foreground, border); değişkenler bu rollerden doldurulur: vurgu rengi --primary ve --ring, düğme köşe yarıçapı ise --radius olur.
Değerleri dönüştürmem gerekiyor mu?
Hayır. shadcn/ui CSS kodu hex değerleri olduğu gibi kabul eder. Kurulumunuz oklch ya da hsl kullanıyorsa her zamanki aracınızla dönüştürün ya da hex olarak bırakın.
Koyu tema ne olacak?
Sitenin koyu teması varsa sonuç, background, foreground, yüzeyler ve kenarlıklar için ölçülen koyu değerlerle bir .dark bloğu ekler.