Text color invert on background color

[jacob-kerber]

I have an absolute div that has a transparent background with a blur effect. This div has a line of text that uses the primary color (using the theme selector in ShadCN) based on light or dark mode. Sometimes, there might be a dark section scroll behind this transparent blurred div that makes the text un-readable. How can I invert the whole or the portion of text that is over the dark background?

Here's the blur div snippit

<div className="relative flex flex-col mx-auto bg-background gap-2 w-full md:max-w-3xl">
    <div className="absolute bottom-0 w-full flex flex-col gap-2 ">
        <div className="flex items-center rounded-b-xl border-b border-x backdrop-blur-sm mx-4 px-2 py-0.5 md:mb-6 sm:mb-0  gap-1">
            <p className="text-primary">Important text here</p>
        </div>
    </div>
</div>