Како можете програмски променити боју фонта на основу позадине? (Светли/тамни режим)
Ако сте посетили Martech Zone у последње време, можда сте приметили да сада нудимо могућност прегледа сајта у светлом или тамном режиму. Само потражите месец или сунце икона поред датума у горњој левој траци за навигацију на сајту.
То је прилично кул функција и ради заиста добро. Када сам покренуо нови алат за конверзију у промените ХЕКС у РГБ, желео сам да заправо прикажем боју коју је корисник покушавао да израчуна. Не само да приказујем боју, већ сам додао и лепу функцију која приказује назив боје. Али то је довело до проблема...
Да је узорак који је приказао боју имао светлу позадину, не бисте могли да прочитате текст који генеришем динамички за узорак. Дакле… Морао сам да направим функцију која поставља боју фонта на основу боје позадине и да ли је било довољно контраста да се види фонт.
ЈаваСцрипт функција за светли или тамни режим
Морао сам да направим функцију где бих могао да пренесем хексадецимални код за боју, а затим да вратим да ли фонт треба да буде бели или црни на основу контраста. Ова ЈаваСцрипт функција је урадила трик...
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';
}
Праг у овој функцији се користи за одређивање да ли је одређена боја светла или тамна. Функција конвертује дати хексадецимални код боје у црвену, зелену и плаву (РГБ) компоненте, затим користи формулу за израчунавање перципиране осветљености боје. Ако је осветљеност изнад прага, функција се враћа #000000
, што је хексадецимални код за црну. Ако је осветљеност испод прага, функција се враћа #ffffff
, што је хексадецимални код за бело.
Сврха овог прага је да обезбеди да боја текста изабрана за дату боју позадине има довољно контраста да би била лако читљива. Уобичајено правило је да светли текст (нпр. бели или жути) треба да се користи на тамној позадини, а тамни текст (нпр. црни или плави) треба да се користи на светлој позадини. Коришћењем прага за одређивање да ли је боја светла или тамна, функција може аутоматски изабрати одговарајућу боју текста за дату боју позадине.
Користећи горњу функцију, могу програмски применити ЦСС боје фонта на основу боје позадине. Испробајте конвертор и видећете колико добро ради!