Stylepack

टूल

किसी भी वेबसाइट से shadcn/ui थीम

वेबसाइट का पता डालें और उसका डिज़ाइन उन CSS variables के रूप में पाएँ जिन्हें shadcn/ui पढ़ता है: background, foreground, primary, secondary, muted, accent, border, ring और radius।

आज़माएँstripe.comlinear.appairbnb.com

airbnb.com

4 दिन पहले मापा गया।

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;
}
पूरा जवाब वाला पेज खोलेंडिज़ाइन पैक खोलें

यह कैसे काम करता है

Stylepack साइट को असली ब्राउज़र में खोलता है, चार चौड़ाइयों पर और दोनों थीम में वह मापता है जो रेंडर होता है (न कि जो stylesheet कहती है), और नतीजे को डिज़ाइन पैक के रूप में रखता है। पहले से मापी गई साइट तुरंत जवाब देती है; नई साइट में एक मिनट से कम लगता है। इस पेज का हर मान उसी पैक से आता है।

सवाल

shadcn के variables कैसे भरे जाते हैं?

हर मापे गए रंग की एक भूमिका है (background, foreground, primary, on-primary, surface, muted-foreground, border); variables उन्हीं भूमिकाओं से भरे जाते हैं, जिसमें एक्सेंट --primary और --ring बनता है और बटन का radius --radius।

क्या मुझे मान बदलने होंगे?

नहीं। shadcn/ui की CSS hex मान जैसे हैं वैसे स्वीकार करती है। अगर आपका सेटअप oklch या hsl इस्तेमाल करता है, तो उन्हें अपने सामान्य टूल से बदल लें या hex ही रखें।

डार्क थीम का क्या?

जब साइट में डार्क थीम हो, तो नतीजे में एक .dark ब्लॉक जुड़ता है, जिसमें background, foreground, सतहों और बॉर्डर के मापे गए डार्क मान होते हैं।