3

I have a semi-transparent sidebar with some background filters, on a mostly dark background

semi-transparent sidebar

When scrolling further down, the text gets on the white section and gets really hard to read

enter image description here

Is it possible to dynamically change the text color to be dark when the contrast between the text and anything under it is too low? If not through only Tailwind/normal CSS, then how?

Vitroid
  • 101
  • 2
  • 7
  • Does this answer your question? [Dynamically adjust text color based on background image](https://stackoverflow.com/questions/17195738/dynamically-adjust-text-color-based-on-background-image) – Puka Jan 20 '22 at 16:07
  • It's not specifically just an image, there are other different-colored elements under the sidebar too, not a single image – Vitroid Jan 20 '22 at 16:19

1 Answers1

2

Its not a perfect fix, but I had a similar issue and I was able to use Tailwind's blend modes:

<div class="bg-gray-400 mix-blend-difference" />
tdy
  • 36,675
  • 19
  • 86
  • 83
Trey Smith
  • 21
  • 2