Stylepack

الأدوات

سمة shadcn/ui من أي موقع

أدخل عنوان موقع واحصل على تصميمه بصيغة متغيرات CSS التي يقرأها shadcn/ui: background وforeground وprimary وsecondary وmuted وaccent وborder وring وradius.

جرّبstripe.comlinear.appairbnb.com

stripe.com

تم القياس قبل 4 أيام.

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff
globals.css
/* shadcn/ui theme measured from stripe.com. Values are hex; shadcn's CSS accepts them as they are. */
:root {
  --background: #ffffff;
  --foreground: #061b31;
  --card: #e5edf5;
  --card-foreground: #061b31;
  --popover: #e5edf5;
  --popover-foreground: #061b31;
  --primary: #533afd;
  --primary-foreground: #ffffff;
  --secondary: #ffe0ef;
  --secondary-foreground: #061b31;
  --muted: #e5edf5;
  --muted-foreground: #64748d;
  --accent: #0f4d29;
  --accent-foreground: #ffffff;
  --border: #e5edf5;
  --input: #e5edf5;
  --ring: #533afd;
  --radius: 4px;
}
افتح صفحة الإجابة الكاملةافتح حزمة التصميم

كيف يعمل

يفتح Stylepack الموقع في متصفح حقيقي، ويقيس ما يُعرض فعلًا (لا ما يقوله ملف الأنماط) بأربعة عروض وفي كلا الوضعين، ويحفظ النتيجة كحزمة تصميم. الموقع المقاس سابقًا يجيب فورًا؛ والجديد يستغرق أقل من دقيقة. كل قيمة في هذه الصفحة تأتي من تلك الحزمة.

أسئلة

كيف تُملأ متغيرات shadcn؟

لكل لون مقاس دور (background وforeground وprimary وon-primary وsurface وmuted-foreground وborder)؛ تُملأ المتغيرات من تلك الأدوار، مع اللون المميز في --primary و--ring واستدارة الزر في --radius.

هل أحتاج إلى تحويل القيم؟

لا. يقبل CSS الخاص بـ shadcn/ui قيم hex كما هي. إن كان إعدادك يستخدم oklch أو hsl، فحوّلها بأداتك المعتادة أو أبقِ قيم hex.

ماذا عن السمة الداكنة؟

عندما يكون للموقع سمة داكنة، تضيف النتيجة كتلة .dark بالقيم الداكنة المقاسة للخلفية والنص والأسطح والحدود.