Content Marketing

Giunsa Nimo Mabag-o ang Kolor sa Font Base sa Background? (Kahayag/Itom nga Mode)

Kung nakaduaw ka Martech Zone karong bag-o, tingali nakamatikod ka nga kami karon nagtanyag sa abilidad sa pagtan-aw sa site bisan sa kahayag o ngitngit nga mode. Pangitaa lang ang bulan o adlaw icon sunod sa petsa sa ibabaw nga wala nga navigation bar sa site.

Kini usa ka medyo cool nga bahin ug kini nagtrabaho pag-ayo. Sa dihang gilusad nako ang usa ka bag-ong himan sa pagkakabig sa usba ang HEX sa RGB, Gusto nakong ipakita gyud ang kolor nga gisulayan kalkulado sa user. Dili lang nako gipakita ang kolor, apan gidugangan usab nako ang usa ka nindot nga bahin nga nagpakita sa ngalan sa kolor. Apan kana nagpaila sa usa ka isyu…

Kung ang swatch nga nagpakita sa kolor adunay gaan nga background, dili nimo mabasa ang teksto nga dinamikong akong gihimo alang sa swatch. Mao nga… Kinahanglan kong maghimo usa ka function nga nagtakda sa kolor sa font base sa kolor sa background ug kung adunay igo o wala nga kalainan aron makita ang font.

JavaScript Function Para sa Kahayag o Dark Mode

Kinahanglan kong maghimo ug function diin mapasa nako ang hex code para sa kolor, unya ibalik kung puti o itom ang font base sa contrast. Kini nga JavaScript function naghimo sa limbong…

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

Ang threshold sa kini nga function gigamit aron mahibal-an kung ang usa ka partikular nga kolor kahayag o ngitngit. Ang function nag-convert sa gihatag nga hexadecimal color code ngadto sa pula, berde, ug asul (RGB) nga mga sangkap, dayon naggamit ug pormula aron makalkulo ang gitan-aw nga kahayag sa kolor. Kung ang kahayag labaw sa threshold, ang function mobalik #000000, nga mao ang hex code alang sa itom. Kung ang kahayag ubos sa threshold, ang function mobalik #ffffff, nga mao ang hex code alang sa puti.

Ang katuyoan niini nga threshold mao ang pagsiguro nga ang kolor sa teksto nga gipili alang sa gihatag nga kolor sa background adunay igo nga kalainan aron dali mabasa. Ang kasagarang lagda mao nga ang gaan nga teksto (pananglitan puti o dalag) kinahanglan gamiton sa ngitngit nga background, ug itom nga teksto (eg itom o asul) kinahanglan gamiton sa kahayag nga background. Pinaagi sa paggamit sa usa ka threshold aron mahibal-an kung ang usa ka kolor hayag o ngitngit, ang function mahimong awtomatiko nga makapili sa angay nga kolor sa teksto alang sa gihatag nga kolor sa background.

Gamit ang function sa ibabaw, mahimo nako nga magamit sa programa ang font-color CSS base sa kolor sa background. Sulayi ang converter ug imong makita kung unsa kini ka maayo!

Douglas Karr

Douglas Karr mao ang CMO sa OpenINSIGHTS ug ang nagtukod sa Martech Zone. Gitabangan ni Douglas ang daghang mga malampuson nga mga pagsugod sa MarTech, nakatabang sa tungod sa kakugi nga kapin sa $5 bilyon sa mga pagkuha ug pamuhunan sa Martech, ug nagpadayon sa pagtabang sa mga kompanya sa pagpatuman ug pag-automate sa ilang mga estratehiya sa pagbaligya ug pagpamaligya. Si Douglas usa ka internasyonal nga giila nga digital nga pagbag-o ug eksperto ug mamumulong sa MarTech. Si Douglas usa usab ka gipatik nga tagsulat sa usa ka giya ni Dummie ug usa ka libro sa pagpangulo sa negosyo.

Nalangkit nga mga Artikulo

Balik sa ibabaw nga button
Close

Nakit-an ang Adblock

Martech Zone makahatag kanimo niini nga sulod nga walay bayad tungod kay among gi-monetize ang among site pinaagi sa ad revenue, affiliate links, ug sponsorships. Mapasalamaton kami kung imong tangtangon ang imong ad blocker samtang imong gitan-aw ang among site.