Ako môžete programovo zmeniť farbu písma na základe pozadia? (Svetlý/Tmavý režim)
Ak ste navštívili Martech Zone v poslednej dobe ste si mohli všimnúť, že teraz ponúkame možnosť prezerania stránky v svetlom alebo tmavom režime. Stačí vyhľadať mesiac alebo slnko ikonu vedľa dátumu v ľavom hornom navigačnom paneli na stránke.
Je to celkom fajn funkcia a funguje naozaj dobre. Keď som spustil nový nástroj na konverziu na zmeniť HEX na RGB, chcel som skutočne zobraziť farbu, ktorú sa používateľ pokúšal vypočítať. Nezobrazujem len farbu, ale pridal som aj peknú funkciu, ktorá zobrazovala názov farby. To však vyvolalo problém…
Ak by vzorka zobrazujúca farbu mala svetlé pozadie, nemohli by ste prečítať text, ktorý dynamicky generujem pre vzorku. Takže... Musel som vytvoriť funkciu, ktorá nastavila farbu písma na základe farby pozadia a toho, či bol alebo nebol dostatočný kontrast na zobrazenie písma.
Funkcia JavaScript pre svetlý alebo tmavý režim
Potreboval som vytvoriť funkciu, kde by som mohol odovzdať hexadecimálny kód pre farbu a potom vrátiť, či má byť písmo biele alebo čierne na základe kontrastu. Táto funkcia JavaScript urobila trik…
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';
}
Prah v tejto funkcii sa používa na určenie, či je konkrétna farba svetlá alebo tmavá. Funkcia konvertuje daný hexadecimálny kód farby na červenú, zelenú a modrú (RGB) komponenty, potom použije vzorec na výpočet vnímaného jasu farby. Ak je jas nad prahovou hodnotou, funkcia sa vráti #000000
, čo je hexadecimálny kód čiernej farby. Ak je jas pod prahovou hodnotou, funkcia sa vráti #ffffff
, čo je hexadecimálny kód pre bielu farbu.
Účelom tohto prahu je zabezpečiť, aby farba textu zvolená pre danú farbu pozadia mala dostatočný kontrast, aby bola ľahko čitateľná. Bežným pravidlom je, že svetlý text (napr. biely alebo žltý) by mal byť použitý na tmavom pozadí a tmavý text (napr. čierny alebo modrý) by mal byť použitý na svetlom pozadí. Pomocou prahu na určenie, či je farba svetlá alebo tmavá, môže funkcia automaticky vybrať vhodnú farbu textu pre danú farbu pozadia.
Pomocou vyššie uvedenej funkcie môžem programovo použiť CSS farby písma na základe farby pozadia. Otestujte prevodník a uvidíte, ako dobre to funguje!