टूल
किसी भी वेबसाइट से shadcn/ui थीम
वेबसाइट का पता डालें और उसका डिज़ाइन उन CSS variables के रूप में पाएँ जिन्हें shadcn/ui पढ़ता है: background, foreground, primary, secondary, muted, accent, border, ring और radius।
यह कैसे काम करता है
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, सतहों और बॉर्डर के मापे गए डार्क मान होते हैं।