Содржина Маркетинг

Како можете програмски да ја промените бојата на фонтот врз основа на позадината? (Светло/темен режим)

Ако сте посетиле Martech Zone во последно време, можеби сте забележале дека сега нудиме можност за прегледување на страницата или во светло или во темно режим. Само побарајте го месечина или сонце икона до датумот во горната лева лента за навигација на страницата.

Тоа е прилично кул карактеристика и работи навистина добро. Кога лансирав нова алатка за конверзија во сменете го HEX во RGB, сакав всушност да ја прикажам бојата што корисникот се обидуваше да ја пресмета. Јас не само што ја прикажувам бојата, туку додадов и убава карактеристика што го прикажува името на бојата. Но, тоа воведе проблем…

Ако примерокот што ја прикажува бојата има светла позадина, нема да можете да го прочитате текстот што го генерирам динамично за примерокот. Така... Морав да создадам функција која ја поставува бојата на фонтот врз основа на бојата на заднината и дали има доволно контраст за да се види фонтот.

Функција JavaScript за светол или темен режим

Требаше да создадам функција каде што можам да го префрлам хексадецимален код за бојата, а потоа да вратам дали фонтот треба да биде бел или црн врз основа на контрастот. Оваа функција 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 на OpenINSIGHTS и основачот на Martech Zone. Даглас им помогна на десетици успешни стартапи на MarTech, помогна во длабинската анализа од над 5 милијарди американски долари за аквизиции и инвестиции на Martech и продолжува да им помага на компаниите во имплементацијата и автоматизирањето на нивните стратегии за продажба и маркетинг. Даглас е меѓународно признат експерт и говорник за дигитална трансформација и MarTech. Даглас е исто така објавен автор на водич за Dummie и книга за бизнис лидерство.

поврзани написи

Вратете се на почетокот копче
Затвори

Откриен е блок за рекламирање

Martech Zone може да ви ја обезбеди оваа содржина без трошоци бидејќи ја монетизираме нашата страница преку приходи од реклами, врски со партнери и спонзорства. Ќе ни биде благодарно ако го отстраните вашиот блокатор на реклами додека ја гледате нашата страница.