How can I achieve this effect?

[ad_1] [https://madebyshape.co.uk/])

The e-mail that changes text colour based on the background? I’m using elementor for my website and tried using this code:

<style>
/* CSS for the text widget */
.opposite-color-text {
transition: color 0.3s;
}
</style>

<script>
// JavaScript for the text widget
document.addEventListener(‘DOMContentLoaded’, function() {
var textWidget = document.querySelector(‘.elementor-widget-wrap .opposite-color-text’);
var backgroundColor = getComputedStyle(textWidget.parentElement).backgroundColor;
var textColor = getOppositeColor(backgroundColor);

textWidget.style.color = textColor;
});

// Function to get the opposite color
function getOppositeColor(color) {
var rgb = color.match(/\d+/g);
var r = parseInt(rgb[0]);
var g = parseInt(rgb[1]);
var b = parseInt(rgb[2]);
var luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;

return luminance > 0.5 ? ‘#000000’ : ‘#ffffff’;
}
</script>

<!– Elementor text widget –>
<div class=”opposite-color-text”>
Your text goes here
</div>

&#x200B;

[ad_2]