2

enter image description here

I am trying to implement a range display, like in the image and the main challenge I am facing is to dynamically switch the font color of value when its background is darker.

I have already tried mix-blend-mode: difference;, but it doesn't help.

I want the font color to switch only between the two colors displayed in the image.

Syed Ahmed
  • 112
  • 1
  • 7

1 Answers1

-1

You could hard code the font color to change when the progress bar is more than 0%

Raqib Zaman
  • 11
  • 4
  • Nah, hardcoded won't be right. for example on 10%, only half of the number would be covered with a darker background. That's why I was looking for a solution based on CSS. – Syed Ahmed May 11 '22 at 18:45
  • Where would the number be located for 10%? Half inside the bar as you said? Or you could push the number to the side until it's a larger amount. Otherwise, you could make the number font half-transparent. I personally would do that. – Raqib Zaman May 11 '22 at 19:10
  • @Ahmad MRF's comment worked for me.. it is resolved! – Syed Ahmed May 12 '22 at 13:02