<script>
document.addEventListener('DOMContentLoaded', () => {
const icon = document.getElementById('brxe-enyccb');
function getAverageRGB(imgEl) {
var blockSize = 5, // only visit every 5 pixels
defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
canvas = document.createElement('canvas'),
context = canvas.getContext && canvas.getContext('2d'),
data, width, height,
i = -4,
length,
rgb = {r:0,g:0,b:0},
count = 0;
if (!context) {
return defaultRGB;
}
height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
context.drawImage(imgEl, 0, 0);
try {
data = context.getImageData(0, 0, width, height);
} catch(e) {
return defaultRGB;
}
length = data.data.length;
while ( (i += blockSize * 4) < length ) {
++count;
rgb.r += data.data[i];
rgb.g += data.data[i+1];
rgb.b += data.data[i+2];
}
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
return rgb;
}
function getContrastYIQ(rgb) {
var yiq = ((rgb.r*299)+(rgb.g*587)+(rgb.b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
}
function checkBackgroundColor() {
const imgEl = document.querySelector('body'); // Adjust to capture your page background
const rgb = getAverageRGB(imgEl);
const contrastColor = getContrastYIQ(rgb);
icon.style.color = contrastColor;
}
window.addEventListener('scroll', checkBackgroundColor);
window.addEventListener('resize', checkBackgroundColor);
checkBackgroundColor(); // Initial check
});
</script>
