ከበስተጀርባው ላይ በመመስረት የቅርጸ-ቁምፊ ቀለምን በፕሮግራም እንዴት መቀየር ይችላሉ? (ብርሃን/ጨለማ ሁነታ)

የጎበኙ ከሆነ Martech Zone በቅርብ ጊዜ፣ አሁን ጣቢያውን በብርሃንም ሆነ በጨለማ ሁነታ የመመልከት ችሎታ እንደምናቀርብ አስተውለህ ይሆናል። ን ብቻ ይፈልጉ ጨረቃ ወይም ፀሐይ በጣቢያው ላይ ከላይ በግራ በኩል ባለው የአሰሳ አሞሌ ላይ ካለው ቀን ቀጥሎ ያለው አዶ።

በጣም ጥሩ ባህሪ ነው እና በትክክል ይሰራል። አዲስ የመቀየሪያ መሳሪያ ወደ ስጀምር HEX ወደ RGB ቀይርተጠቃሚው ለማስላት እየሞከረ ያለውን ቀለም በትክክል ለማሳየት ፈልጌ ነበር። ቀለሙን ብቻ ሳይሆን የቀለሙን ስም የሚያሳይ ጥሩ ባህሪም ጨምሬያለሁ. ግን ያ ጉዳይ አስተዋወቀ…

ቀለሙን የሚያሳየው swatch ቀላል ዳራ ካለው፣ እኔ ለስላጎቱ በተለዋዋጭ የማመነጨውን ጽሁፍ ማንበብ አትችልም ነበር። እና…የቅርጸ-ቁምፊውን ቀለም ከበስተጀርባ ቀለም በመነሳት እና ቅርጸ-ቁምፊውን ለማየት በቂ ንፅፅር መኖር አለመኖሩን የሚያዘጋጅ ተግባር መፍጠር ነበረብኝ።

የጃቫ ስክሪፕት ተግባር ለብርሃን ወይም ለጨለማ ሁነታ

ለቀለም የሄክስ ኮድን ማለፍ የምችልበት ተግባር መፍጠር አስፈልጎኛል፣ ከዚያም በንፅፅር ላይ በመመስረት ቅርጸ-ቁምፊው ነጭ ወይም ጥቁር መሆን እንዳለበት እመልሳለሁ። ይህ የጃቫስክሪፕት ተግባር ዘዴውን ሰርቷል…

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 ን በፕሮግራም መተግበር እችላለሁ። መቀየሪያውን ይሞክሩት እና ምን ያህል በጥሩ ሁኔታ እንደሚሰራ ያያሉ!