ثيم shadcn/ui
أنشئ تكوينات ثيم لـ shadcn/ui. استخدم ثيم shadcn/ui مجاناً عبر الإنترنت دون تسجيل، مع نتائج سريعة ومعالجة آمنة داخل المتصفح.
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
معاينة
معاينة المكوّنات
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}يساعدك ثيم shadcn/ui على العمل بالألوان مباشرة داخل المتصفح.
صُممت الأداة للمصممين والمطورين وصناع المحتوى الذين يحتاجون إلى نتائج سريعة وموثوقة.
Supported formats
How it works
Step 1
افتح ثيم shadcn/ui
Step 2
أدخل الألوان أو استوردها
Step 3
انسخ النتيجة أو صدّرها أو أعد استخدامها
أخطاء شائعة يجب تجنبها
- نسيان فحص التباين قد يضعف قابلية القراءة.
- استخدام ألوان كثيرة قد يجعل اللوحة صعبة التطبيق.
نصائح للمحترفين
- احفظ الألوان الأساسية كمتغيرات CSS.
- اختبر اللوحة في الوضعين الفاتح والداكن قبل النشر.
Privacy guaranteed: everything is processed locally in your browser.
تتم المعالجة محلياً داخل المتصفح كلما أمكن. لا حاجة إلى حساب.
ثيم shadcn/ui لمشاريع الألوان
أنشئ تكوينات ثيم لـ shadcn/ui.
ثيم shadcn/ui دون فقدان الدقة
تجري التحويلات بقيم دقيقة (HEX، RGB، HSL، OKLCH). بدون تقريب بصري — تحصل على اللون المطابق لقصد التصميم.
ثيم shadcn/ui مجاناً عبر الإنترنت
لا حاجة للتسجيل أو تحميل برامج. ثيم shadcn/ui مجاني 100% ويعمل في أي متصفح. تشمل الخطة المجانية 10 استخدامات يوميًا.
ثيم shadcn/ui بسرعة وأمان
تتم المعالجة مباشرة داخل المتصفح لأقصى سرعة. لا تُرسل البيانات إلى خوادمنا، فألوانك وملفاتك تبقى خاصة على جهازك.
ثيم shadcn/ui للمشاركة والتعاون
صدّر النتائج بصيغة HEX، RGB، HSL، CSS، JSON أو انسخها بنقرة واحدة. مثالي لمشاركة دليل الألوان مع فريقك أو توثيق نظام التصميم.
اكتشف جميع أدوات الألوان
استخرج، حوّل، أنشئ لوحات ألوان وتدرجات وتباينات WCAG بنقرات قليلة.
Related tools
أدلة ودروس
تعلم كيفية استخدام أدواتنا من خلال أدلتنا المفصلة.
shadcn-theme: دليل عملي حول developer
دليل مترجم لاستخدام shadcn-theme وفهم أفضل ممارسات developer وتجنب الأخطاء الشائعة.
shadcn-theme: دليل عملي حول developer
دليل مترجم لاستخدام shadcn-theme وفهم أفضل ممارسات developer وتجنب الأخطاء الشائعة.
shadcn-theme: دليل عملي حول developer
دليل مترجم لاستخدام shadcn-theme وفهم أفضل ممارسات developer وتجنب الأخطاء الشائعة.