الثيمات
35 ثيمات بصرية مصممة يدوياً مع أنواع فاتحة وداكنة وأموليد
كل ثيم يستخدم ألواناً صلبة مسطحة دون تدرجات — فلسفة تصميم مستوحاة من مساحات العمل المشتركة الدافئة والهادئة. رموز التصميم مبنية بخصائص CSS المخصصة، مما يجعل الثيمات قابلة للتركيب بالكامل.
فئات الثيمات
تُصنَّف الثيمات إلى فئات:
| الفئة | الوصف | أمثلة |
|---|---|---|
| قياسي | ثيمات نظيفة واحترافية للاستخدام اليومي | light، dark، amoled |
| ملوّن | ثيمات نابضة بألوان مميزة | blue، forest، ocean، sunset |
| فاخر | ثيمات مميزة بألوان غنية وراقية | mocha، lavender، peach |
| خاص | ثيمات فريدة لأمزجة أو بيئات محددة | gruvbox، nord، sepia |
| إمكانية الوصول | ثيمات عالية التباين لقراءة أفضل | high-contrast |
| النظام | يكتشف تفضيل نظام التشغيل تلقائياً (فاتح/داكن) | system |
ثيمات فاتحة
ثيمات داكنة
ثيمات خاصة
كيف تعمل الثيمات
يستخدم Aura Work هندسة رموز متعددة المستويات: رموز التصميم تنتقل من المستوى الأساسي → الدلالي → مستوى المكونات. هذا يتيح ثمت متناسق عبر جميع مكونات الواجهة.
رموز أساسية
تحديد الألوان الأساسية والمسافات والطباعة
رموز دلالية
ربط الأساسيات بالأدوار الدلالية (خلفية، نص، حد، تمييز)
رموز المكونات
تجاوزات دقيقة لكل مكون (زر، بطاقة، إدخال)
تبديل الثيمات
تُطبق الثيمات ديناميكياً عبر خصائص CSS المخصصة. التبديل بين الثيمات فوري — لا حاجة لإعادة تحميل الصفحة.
🎨 الألوان الأساسية (Primitives)
لوحة ألوان دافئة قائمة على الطين تشمل:
- محايدات رملية — رماديات دافئة للخلفيات والنصوص
- لون التمييز الطيني (Terracotta) — لون تمييز واحد يتغير بين الوضعين الفاتح والداكن
- أخضر دلالي — لحالات النجاح والتأكيدات
- عنبري للتحذيرات — لحالات الحذر والتنبيهات
- أحمر للأخطاء — لحالات الخطأ والإجراءات المدمرة
لون التمييز يتحول بين الوضعين الفاتح والداكن مع الحفاظ على نفس الطابع الدافئ.
📝 جدول رموز CSS المخصصة
تستخدم الثيمات خصائص CSS مخصصة لكل الألوان:
| الرمز | الوصف | مثال (فاتح) |
|---|---|---|
--color-bg | خلفية الصفحة الأساسية | #faf9f5 |
--color-bg-card | خلفية البطاقات والعناصر المرتفعة | #ffffff |
--color-text | لون النص الأساسي | #5c5544 |
--color-text-strong | نص العناوين البارزة | #28241d |
--color-accent | لون التمييز والروابط والأزرار الأساسية | #c2683f |
--color-success | حالات النجاح | #4f7d47 |
--color-warning | حالات التحذير | #a9761f |
--color-danger | حالات الخطأ | #b8482f |
--shadow-md | ظل متوسط للبطاقات | 0 4px 16px rgba(...) |
:root {
/* الخلفيات */
--color-bg: #faf9f5;
--color-bg-weak: #f5f3ec;
--color-bg-card: #ffffff;
--color-bg-strong: #1e1b16;
/* النصوص */
--color-text: #5c5544;
--color-text-weak: #938a76;
--color-text-strong: #28241d;
/* التمييز */
--color-accent: #c2683f;
--color-accent-warm: #cf7a52;
--color-accent-subtle: rgba(194, 104, 63, 0.11);
/* دلالية */
--color-success: #4f7d47;
--color-warning: #a9761f;
--color-danger: #b8482f;
}تجاوز هذه الخصائص في ثيمك المخصص لتغيير المظهر بأكمله.
☀️🌙 الوضع الفاتح والداكن
كل ثيم في Aura Work له نسخة فاتحة وأخرى داكنة (مثل ocean-light و ocean-dark). يتم التبديل بينهما فورياً دون إعادة تحميل الصفحة. ثيم system الخاص يتبع تلقائياً تفضيل نظام التشغيل عبر خاصية prefers-color-scheme ويبدّل تلقائياً عند تغيير إعدادات الجهاز (مثلاً غروب الشمس في macOS).
🔧 إنشاء ثيمات مخصصة
أنشئ ثيمك الخاص باتباع هذه الخطوات:
- 1. انسخ ثيماً موجوداً (مثل
light.css) - 2. تجاوز خصائص CSS المخصصة بألوانك
- 3. أضف ثيمك إلى
packages/ui/src/themes/ - 4. سجّله في قائمة الثيمات
- 5. اختبره في الوضعين الفاتح والداكن
- 6. أرسل طلب سحب (PR)
راجع packages/ui/src/themes/ لكل ملفات الثيمات.
📱 RTL وإمكانية الوصول
يتضمن نظام الثيمات:
- ثيم عالي التباين — لإمكانية الوصول (متوافق مع WCAG AA)
- دعم RTL كامل — للعربية والفارسية
- اكتشاف تفضيل النظام — عبر
prefers-color-scheme - تقليل الحركة — يحترم
prefers-reduced-motion - تحجيم الخط — يدعم تعديلات حجم الخط في المتصفح
انشاء سمة مخصصة يدوياً
يمكنك انشاء سمة مخصصة بتعريف مجموعة من متغيرات CSS. ضع ملف السمة في ~/.config/aura/themes/ وسيتم تحميله تلقائيا.
{
"name": "my-theme",
"colors": {
"bg-primary": "#1a1b26",
"fg-primary": "#c0caf5",
"accent": "#7aa2f7"
}
}يمكنك تصدير السمات ومشاركتها مع المجتمع. السمات المميزة من المجتمع تضاف إلى المعرض الرسمي.