I need to set text color dynamically based on background (text color could be white or black). I chose filter css for that. But I don't know how to control it. When background is pink I want to see my text white. When background is #ffebeeI want to see text color black. Now for both situations text color is black.
.container0 {
background-color: red
}
.container1 {
background-color: pink
}
.container2 {
background-color: #ffebee;
}
.container3 {
background-color: white
}
.filter {
font-size: 40px;
background: inherit;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
}
<div class="container0">
<div class="filter">
Text
</div>
</div>
<div class="container1">
<div class="filter">
Text
</div>
</div>
<div class="container2">
<div class="filter">
Text
</div>
</div>
<div class="container3">
<div class="filter">
Text
</div>
</div>
desired result (it shouldn't be hardcoded, but I hope for some hack):
