<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>

Contact Us

Loading