متجر السماتدليل التأليف

🎨 دليل تأليف السمات

تعرّف على مخطط JSON لسمات ForcedSkin وقواعد حقول اللوحة — صمّم لوحات لأي موقع وأرسلها للمجتمع.

بداية سريعة

اختر وضعاً

قرّر ما إذا كانت السمة تعمل في light (لوحات فاتحة) أو dark (لوحات داكنة).

املأ الألوان

اتبع مواصفات الحقول أدناه — يجب أن تتوفر على الأقل كل المفاتيح المطلوبة في JSON.

أرسل للمراجعة

في صفحة السمات انقر «إرسال سمة». يوافق المشرفون قبل ظهورها للجميع.

حقول الألوان

يجب أن تكون كل إدخالات اللوحة سلاسل hex (#RRGGBB) أو قيم CSS rgba(...).

backgroundمطلوب

خلفية الصفحة الأساسية — السمات الفاتحة قرب الأبيض، والداكنة قرب المحايدات العميقة. متغير CSS: --color-background

مثال: #F8FFF8 / #101410

foregroundمطلوب

النص الأساسي — تباين مقروء مع الخلفية. متغير CSS: --color-foreground

مثال: #2C3E2C / #E0E0E0

surfaceمطلوب

تعبئة البطاقات/اللوحات/الحاويات — مرتفعة قليلاً عن الخلفية. متغير CSS: --color-surface

مثال: #F0FFF0 / #1E221E

surfaceMutedاختياري

تحويم خافت / حاويات فرعية بدرجة عن surface. متغير CSS: --color-surface-muted

مثال: #F5FDF5 / #161816

borderمطلوب

خطوط رفيعة وفواصل — عادة رمادي منخفض التشبع / نغمات شبه شفافة. متغير CSS: --color-border

مثال: #D8E8D8 / #333633

mutedمطلوب

نص ثانوي وعناصر نائبة. متغير CSS: --color-muted

مثال: #6C7E6C / #A0A0A0

primaryمطلوب

سلم العلامة الأساسي للأزرار/الروابط/التركيز — لون واحد أو سلم (50–950). يتطلب على الأقل الدرجات 500/600/700. يقابل متغيرات CSS --color-primary- مع رموز الدرجات (50–950)

مثال: { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondaryاختياري

سلالم تمييز ثانوية للرقائق/أزرار الشبح — البنية تطابق primary — تقابل --color-secondary- مع رموز الدرجات

مثال: { "500": "#AAA", ... }

accentاختياري

إبرازات وشارات وألوان تسليط — البنية تطابق primary — تقابل --color-accent- مع رموز الدرجات

مثال: { "500": "#FFEB3B", ... }

varsاختياري

خصائص CSS مخصصة حرة — المفاتيح بدون «--»؛ تُطبَّق القيم كما هي على :root

مثال: { "custom-radius": "8px" }

سلالم الألوان

تقبل مفاتيح JSON المسماة primary و secondary و accent أياً من أسلوبي التأليف أدناه:

مختصر (ثلاث درجات أساسية)

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

يروّج المحرّك للدرجة 500 كلون افتراضي؛ تغطي 600/700 حالتي التحويم/النشاط.

سلم كامل (50 → 950، إحدى عشرة درجة)

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

نشر السلم الكامل يعطي انتقالات لونية أكثر سلاسة في كل مكان.

نصيحة: تتبع معرّفات الدرجات سلالم أسلوب Tailwind: 50 الأفتح و950 الأغمق. السمات الفاتحة تستخدم أساساً 500/600/700؛ الداكنة غالباً 400/500/600.

أمثلة كاملة

🌿 مثال فاتح (light-mint)

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 مثال داكن (dark-forest)

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

متغيرات مخصصة (vars)

إن قصرت الرموز الافتراضية، أضف متغيرات CSS إضافية تحت عقدة vars — احذف البادئة -- من كل مفتاح.

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

قواعد المعرّف (name)

أحرف ASCII صغيرة وأرقام وشرطة فقط ( a-z 0-9 - ).
فضّل أزواجاً موجزة «وضع-أسلوب» مثل «dark-ocean» أو «light-sakura».
يجب أن تكون المعرّفات فريدة عالمياً — لا يمكن تغييرها بعد النشر، فتأكد مسبقاً.
الحد الأقصى للطول 50 حرفاً.

الإرسال والمراجعة

🔐 سجّل الدخول قبل الإرسال.

⏳ تدخل الإرسالات قائمة المراجعة — يرد الفريق عادة خلال 1–3 أيام عمل.

✅ تظهر السمات الموافق عليها في المتجر ليضيفها الجميع إلى المفضلة.

❌ الألوان غير الصالحة أو الأسماء المتعارضة أو مخالفة السياسة تُرفض — احذف وأرسل نسخة مصححة.

🚫 لا شيفرة خبيثة ولا محتوى كراهية ولا لوحات تنتهك الحقوق بوضوح.

جاهز؟ انتقل إلى متجر السمات وانشر لوحتك.

🎨 أرسل سمة