Header: Automatically change blocks color depending on the background

[beafialho]

What problem does this address?

Currently, when I want to design a theme with a full width cover containing a header, if the background is dark I add a white site title and/or site logo. But that means I can't use the same header in other pages if the background is white, because the colors set in the header aren't black, they're always the same. Here are screenshots of what I mean:

Home template with cover	Page template with same header

Right now, the way to work this issue around is to create two headers, one for each background color, but that can be very confusing for users. It also takes extra work to update two navigations, instead of one, etc.

What is your proposed solution?

Ideally the site title (and any block in the header) should automatically change color depending on the background, as this website does when we scroll down. For the site logo, I can imagine adding an option to load two logo variations: one light and one dark so that this automatic color change works.

The same thing I just described for the footer can also happen, although it is not as common as a pattern as this one.

Or could this work similarly to Figma components where we'd have the same header but are able to apply different colors to its elements depending on the template. I have no idea if this is technically doable, just throwing in a potential idea.

[tellthemachines]

This sounds like something that could be solved by #57537, specifically the extension of block style variations for section styling.