تخصيص ألوان OKLCH في قالب VeloCMS

تُعرِّف قوالب VeloCMS جميع ألوانها باستخدام OKLCH، وهو فضاء لوني متجانس إدراكيًا؛ أي أن رفع قيمة السطوع بمقدار 10 نقاط يبدو تغييرًا متسقًا بصريًا بصرف النظر عن درجة اللون. يختلف هذا عن HSL، حيث قد يبدو رفع السطوع من 40% إلى 50% لافتًا في بعض درجات الألوان وكأنه غير محسوس في درجات أخرى. مع OKLCH تحصل على أنظمة ألوان قابلة للتنبؤ ومتوافقة مع معايير WCAG دون الحاجة إلى التحقق يدويًا من نسب التباين.

فهم المحاور الثلاثة لـ OKLCH

يعتمد OKLCH على ثلاث قيم: L (السطوع، من 0 إلى 100%)، وC (الكثافة، تتراوح تقريبًا بين 0 و0.4 حيث تعني القيمة 0 لونًا رماديًا و0.37 لونًا أساسيًا مشبعًا)، وH (درجة اللون، من 0 إلى 360 درجة). لتحويل لون التمييز في قالبك من الأزرق إلى التيل، ما عليك سوى تغيير H وحده — من حوالي 250 إلى حوالي 180 — وإبقاء قيمتي L وC كما هما. يحتفظ اللون بنفس الإضاءة النسبية والتشبع، لكنه ينتمي إلى عائلة درجة لون مختلفة.

/* Example: changing primary accent from indigo to teal */
:root {
  /* original indigo */
  --primary: oklch(0.55 0.22 250);
  /* changed to teal -- only H changed */
  --primary: oklch(0.55 0.22 180);
}

/* Light/dark pair that maintains WCAG AA contrast */
:root  { --background: oklch(0.98 0 0); --foreground: oklch(0.12 0 0); }
.dark  { --background: oklch(0.10 0 0); --foreground: oklch(0.96 0 0); }

تحرير ألوان القالب من إدارة القوالب

انتقل إلى إدارة القوالب واختر القالب النشط. يعرض قسم الألوان كل رمز دلالي — background وforeground وprimary وsecondary وmuted وaccent وdestructive — مصحوبًا بعيّنة لونية وقيمة OKLCH قابلة للتعديل. انقر على العيّنة لفتح منتقي الألوان الذي يعرض محاور OKLCH على شكل شرائط تمرير. اسحب شريط درجة اللون لتحريك عائلة اللون بأكملها، أو اضبط الكثافة للتنقل بين الألوان الباهتة والزاهية. تظهر التغييرات في معاينة حية داخل لوحة الإدارة قبل الحفظ.

ضمان إمكانية الوصول دون فحوصات يدوية

يُجري محرر القالب فحصًا حيًا لنسبة التباين بين background وforeground، وبين primary وprimary-foreground. إذا انخفضت نسبة التباين عن 4.5:1 (معيار WCAG AA للنصوص العادية)، ظهر شارة تحذيرية على الزوج المخفق. يمكنك إصلاح ذلك إما بتغميق الأمامية أو تفتيح الخلفية حتى تختفي الشارة.