How do you change the color of a fixed text based on the background color

Question

Does anyone know a pure css solution to make every part of a fixed svg change color based on the background color (light or dark), just like in this website and their logo. I tried to look at the code, but i don't see anything that can explain this behaviour. Maybe they are using a js solution but i can't imagine how they do it.

I've checked:

• The fill color of the svg: it doesn't change.
• Every css value of the svg and the parent: nothing that can explain this behaviour to my knowledge.

Anyone knows how to do this?

Answer 1

Simply speaking, you cannot assign a color property to an element based on its or its parent’s background-color in CSS.

But, you can use mix-blend-mode to apply some color effect that takes into account fore- and background.

This is what they do in your site example.

If you inspect the MENU’s properties, you will notice that the color is the same as the background. But due to mix-blend-mode: difference, it will be calculated black with the same color in the background, or white, if the background is black.

What’s really nice about this is that colour can be calculated differently in the middle of a character. This even works on top of video.