كيف يمكنك تغيير لون الخط برمجيًا بناءً على الخلفية؟ (الوضع الفاتح / الداكن)
إذا زرت Martech Zone في الآونة الأخيرة ، ربما لاحظت أننا نقدم الآن إمكانية عرض الموقع إما في الوضع الفاتح أو الداكن. فقط ابحث عن ملف القمر أو الشمس بجوار التاريخ في أعلى شريط التنقل الأيسر على الموقع.
إنها ميزة رائعة وتعمل بشكل جيد حقًا. عندما أطلقت أداة تحويل جديدة إلى تغيير HEX إلى RGB، كنت أرغب في عرض اللون الذي كان المستخدم يحاول حسابه. لا أعرض اللون فحسب ، بل أضفت أيضًا ميزة لطيفة تعرض اسم اللون. لكن هذا أدى إلى مشكلة ...
إذا كان الحامل الذي يعرض اللون يحتوي على خلفية فاتحة ، فلن تتمكن من قراءة النص الذي أقوم بإنشائه ديناميكيًا للحامل. لذلك ... كان علي إنشاء وظيفة تحدد لون الخط بناءً على لون الخلفية وما إذا كان هناك تباين كافٍ لعرض الخط أم لا.
وظيفة JavaScript للوضع الفاتح أو الداكن
كنت بحاجة إلى إنشاء وظيفة يمكنني من خلالها تمرير الرمز السداسي للون، ثم إرجاع ما إذا كان الخط يجب أن يكون أبيض أو أسود بناءً على التباين. وظيفة جافا سكريبت هذه قامت بالمهمة…
function contrast(hex) {
var threshold = 149;
let r = 0, g = 0, b = 0;
// 3 digits
if (hex.length == 4) {
r = "0x" + hex[1] + hex[1];
g = "0x" + hex[2] + hex[2];
b = "0x" + hex[3] + hex[3];
// 6 digits
} else if (hex.length == 7) {
r = "0x" + hex[1] + hex[2];
g = "0x" + hex[3] + hex[4];
b = "0x" + hex[5] + hex[6];
}
return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}
يتم استخدام الحد الفاصل في هذه الوظيفة لتحديد ما إذا كان لون معين فاتحًا أم غامقًا. تقوم الوظيفة بتحويل رمز اللون السداسي العشري المحدد إلى اللون الأحمر والأخضر والأزرق (RGB) ، ثم يستخدم صيغة لحساب السطوع المدرك للون. إذا كان السطوع أعلى من الحد الأدنى ، ترجع الدالة #000000
، وهو الكود السداسي العشري للأسود. إذا كان السطوع أقل من الحد الأدنى ، ترجع الدالة #ffffff
، وهو الرمز السداسي العشري للأبيض.
الغرض من هذا الحد هو التأكد من أن لون النص المختار للون الخلفية المحدد به تباين كافٍ ليكون قابلاً للقراءة بسهولة. القاعدة العامة الشائعة هي أن النص الفاتح (مثل الأبيض أو الأصفر) يجب أن يستخدم على خلفية داكنة ، والنص الغامق (مثل الأسود أو الأزرق) يجب أن يستخدم على خلفية فاتحة. باستخدام عتبة لتحديد ما إذا كان اللون فاتحًا أم داكنًا ، يمكن للوظيفة أن تختار تلقائيًا لون النص المناسب للون خلفية معين.
باستخدام الوظيفة المذكورة أعلاه ، يمكنني تطبيق CSS بلون الخط برمجيًا بناءً على لون الخلفية. اختبر المحول وسترى مدى نجاحه!