Switching color of a logo based on color of its background

Hi there,

Here’s a video showing a site I’m working on.

The aim is for the logo on the left of the screen to be white, when it’s on a colored (green) background and black, when it’s on the white background.

I’ve achieved the current effect using…

CSS mix-blend-mode: difference;

But now the logo is just the complementary color to the green color, when it’s layered over the green bg.

Is there a slick way to make the logo all when, when its atop the green backgrounds?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)