Content Marketing

كيف يمكنك تغيير لون الخط برمجيًا بناءً على الخلفية؟ (الوضع الفاتح / الداكن)

إذا زرت 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 بلون الخط برمجيًا بناءً على لون الخلفية. اختبر المحول وسترى مدى نجاحه!

Douglas Karr

Douglas Karr هو CMO من أوبن إنسايتس ومؤسس Martech Zone. ساعد دوغلاس العشرات من الشركات الناشئة الناجحة في MarTech، وساعد في العناية الواجبة بأكثر من 5 مليارات دولار في عمليات الاستحواذ والاستثمارات في Martech، ويستمر في مساعدة الشركات في تنفيذ وأتمتة استراتيجيات المبيعات والتسويق الخاصة بها. دوغلاس هو أحد خبراء التحول الرقمي المعترف بهم عالميًا وخبير ومتحدث في MarTech. دوغلاس هو أيضًا مؤلف منشور لدليل Dummie وكتاب عن قيادة الأعمال.

مقالات ذات صلة

العودة إلى الزر العلوي
اغلاق

كشف Adblock

Martech Zone قادر على تزويدك بهذا المحتوى دون أي تكلفة لأننا نستثمر موقعنا من خلال عائدات الإعلانات ، والروابط التابعة ، والرعاية. سنكون ممتنين إذا قمت بإزالة مانع الإعلانات الخاص بك أثناء عرض موقعنا.