Wie können Sie die Schriftfarbe basierend auf dem Hintergrund programmgesteuert ändern? (Hell/Dunkel-Modus)
Wenn Sie besucht haben Martech Zone In letzter Zeit haben Sie vielleicht bemerkt, dass wir jetzt die Möglichkeit bieten, die Website entweder im hellen oder im dunklen Modus anzuzeigen. Suchen Sie einfach nach dem Mond oder Sonne Symbol neben dem Datum in der Navigationsleiste oben links auf der Website.
Es ist ein ziemlich cooles Feature und es funktioniert wirklich gut. Als ich ein neues Konvertierungstool auf den Markt brachte Ändern Sie HEX in RGB, wollte ich tatsächlich die Farbe anzeigen, die der Benutzer zu berechnen versuchte. Ich zeige nicht nur die Farbe an, sondern habe auch eine nette Funktion hinzugefügt, die den Namen der Farbe anzeigt. Aber das führte zu einem Problem …
Wenn das Farbfeld, das die Farbe anzeigt, einen hellen Hintergrund hätte, könnten Sie den Text, den ich dynamisch für das Farbfeld generiere, nicht lesen. Also … musste ich eine Funktion erstellen, die die Schriftfarbe basierend auf der Hintergrundfarbe festlegt und ob genügend Kontrast vorhanden ist, um die Schrift anzuzeigen.
JavaScript-Funktion für hellen oder dunklen Modus
Ich musste eine Funktion erstellen, bei der ich den Hex-Code für die Farbe übergeben und dann basierend auf dem Kontrast zurückgeben konnte, ob die Schriftart weiß oder schwarz sein sollte. Diese JavaScript-Funktion hat es geschafft ...
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';
}
Der Schwellenwert in dieser Funktion wird verwendet, um zu bestimmen, ob eine bestimmte Farbe hell oder dunkel ist. Die Funktion wandelt den angegebenen hexadezimalen Farbcode in Rot, Grün und Blau um (RGB)-Komponenten und verwendet dann eine Formel, um die wahrgenommene Helligkeit der Farbe zu berechnen. Wenn die Helligkeit über dem Schwellenwert liegt, kehrt die Funktion zurück #000000
, was der Hex-Code für Schwarz ist. Wenn die Helligkeit unter dem Schwellenwert liegt, kehrt die Funktion zurück #ffffff
, was der Hex-Code für Weiß ist.
Der Zweck dieses Schwellenwerts besteht darin, sicherzustellen, dass die für die gegebene Hintergrundfarbe gewählte Textfarbe genügend Kontrast hat, um leicht lesbar zu sein. Als Faustregel gilt, dass helle Schrift (z. B. weiß oder gelb) auf dunklem Hintergrund und dunkle Schrift (z. B. schwarz oder blau) auf hellem Hintergrund verwendet werden sollte. Indem ein Schwellenwert verwendet wird, um zu bestimmen, ob eine Farbe hell oder dunkel ist, kann die Funktion automatisch die geeignete Textfarbe für eine gegebene Hintergrundfarbe auswählen.
Mit der obigen Funktion kann ich das Schriftfarben-CSS basierend auf der Hintergrundfarbe programmgesteuert anwenden. Testen Sie den Konverter und Sie werden sehen, wie gut er funktioniert!