Marketing Përmbajtja

Si mund ta ndryshoni në mënyrë programore ngjyrën e shkronjave bazuar në sfond? (Modaliteti i dritës / e errët)

Nëse e keni vizituar Martech Zone kohët e fundit, mund të keni vënë re se ne tani ofrojmë mundësinë për të parë faqen në modalitetin e dritës ose të errët. Thjesht kërkoni për hënë apo diell ikona pranë datës në shiritin e lundrimit majtas sipër në sajt.

Është një veçori mjaft e lezetshme dhe funksionon vërtet mirë. Kur nisa një mjet të ri konvertimi në ndryshoni HEX në RGB, doja të shfaqja në të vërtetë ngjyrën që përdoruesi po përpiqej të llogariste. Unë jo vetëm që shfaq ngjyrën, por shtova gjithashtu një veçori të këndshme që shfaqte emrin e ngjyrës. Por kjo krijoi një problem…

Nëse swatch-i që shfaqi ngjyrën do të kishte një sfond të lehtë, nuk do të mund të lexoni tekstin që unë gjeneroj në mënyrë dinamike për swatch-in. Kështu… Më duhej të krijoja një funksion që vendoste ngjyrën e shkronjave bazuar në ngjyrën e sfondit dhe nëse kishte apo jo kontrast të mjaftueshëm për të parë fontin.

Funksioni JavaScript për modalitetin e lehtë ose të errët

Më duhej të krijoja një funksion ku mund të kaloja kodin hex për ngjyrën, më pas të ktheja nëse fonti duhet të ishte i bardhë apo i zi bazuar në kontrastin. Ky funksion JavaScript bëri mashtrimin…

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';
}

Pragu në këtë funksion përdoret për të përcaktuar nëse një ngjyrë e caktuar është e hapur apo e errët. Funksioni konverton kodin e dhënë heksadecimal të ngjyrës në të kuqe, jeshile dhe blu (RGB) komponentët, pastaj përdor një formulë për të llogaritur shkëlqimin e perceptuar të ngjyrës. Nëse ndriçimi është mbi pragun, funksioni kthehet #000000, i cili është kodi heks për të zezën. Nëse ndriçimi është nën pragun, funksioni kthehet #ffffff, i cili është kodi heks për të bardhën.

Qëllimi i këtij pragu është të sigurojë që ngjyra e tekstit e zgjedhur për ngjyrën e dhënë të sfondit të ketë kontrast të mjaftueshëm për të qenë lehtësisht i lexueshëm. Një rregull i zakonshëm është që teksti i lehtë (p.sh. i bardhë ose i verdhë) duhet të përdoret në një sfond të errët dhe teksti i errët (p.sh. i zi ose blu) duhet të përdoret në një sfond të hapur. Duke përdorur një prag për të përcaktuar nëse një ngjyrë është e lehtë apo e errët, funksioni mund të zgjedhë automatikisht ngjyrën e duhur të tekstit për një ngjyrë të caktuar sfondi.

Duke përdorur funksionin e mësipërm, unë mund të aplikoj në mënyrë programore CSS me ngjyra të shkronjave bazuar në ngjyrën e sfondit. Provoni konvertuesin dhe do të shihni se sa mirë funksionon!

Douglas Karr

Douglas Karr është CMO i OpenINSIGHTS dhe themeluesi i Martech Zone. Douglas ka ndihmuar dhjetëra startup të suksesshëm të MarTech, ka ndihmuar në analizën e duhur prej mbi 5 miliardë dollarësh në blerjet dhe investimet e Martech dhe vazhdon të ndihmojë kompanitë në zbatimin dhe automatizimin e strategjive të tyre të shitjeve dhe marketingut. Douglas është një ekspert dhe folës i transformimit dixhital dhe i njohur ndërkombëtarisht në MarTech. Douglas është gjithashtu një autor i botuar i një udhëzuesi Dummie dhe një libri për udhëheqjen e biznesit.

Artikuj Të Ngjashëm

Kthehu në krye të faqes
afër

Blloku i reklamave u zbulua

Martech Zone është në gjendje t'ju ofrojë këtë përmbajtje pa kosto, sepse ne fitojmë para nga faqja jonë përmes të ardhurave nga reklamat, lidhjeve të filialeve dhe sponsorizimeve. Do të vlerësonim nëse do të hiqnit bllokuesin tuaj të reklamave ndërsa shikoni faqen tonë.