Duotone: Dynamic filters based on theme.json variables

[MaggieCabrera]

What problem does this address?

The use case for this feature would be a theme that wants to apply a duotone filter based on the colors of the theme. In this example we can think about the background/text color combo such as here:

It would be great if we could define the preset filter in this way in theme.json:

"duotone": [
        {
            "colors": [ "var(--wp--custom--color--primary)", "var(--wp--custom--color--background)" ],
            "slug": "my-filter",
            "name": "My filter"
        }
    ],

So that when the user changes the background color of their site, the already existing images will mage the new background color too.

[carolinan]

I was very surprised when I learnt that this did not already work, how can we assure that this is included in the MVP's of any new color features?

[carolinan]

I have received another support question about why presets do not work with the duotones.
Any tips of where to start looking to solve this?

[ndiego]

Ran into this over the weekend. We really need a solution for this. Duotone could be so powerful if it accepted variables.

[mateuswetah]

Hey guys, really hoping for this to be solved one day. I'm creating a FSE theme that adds a lot of patterns using duotone. It also has global styles, but the changes won't be reflected if the duotone configuration does not accept css variables 😢

[mateuswetah]

Has anyone had improvements on this? I was hoping that the new ref variables could to the trick, but apparently not yet.

[ajlende]

The new ref can reference either settings or styles, but it can only be used within the styles right now since the lookup is only done when styles are computed.

If WP_Theme_JSON is updated to apply the ref lookup when reading in the theme.json file, before styles are computed, something like this may be able to work.

{
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [
						{ "ref": "settings.color.palette[0].color" },
						{ "ref": "settings.color.palette[1].color" }
					],
					"name": "Base and primary",
					"slug": "base-and-primary"
				}
			],
			"palette": [
				{
					"color": "#1E1E1E",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#3858E9",
					"name": "Primary",
					"slug": "primary"
				}
			]
		}
	}
	"styles": {
		"blocks": {
			"core/image": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--base-and-primary)"
				}
			}
		}
	}
}

I think using ref instead of resolving CSS custom properties (as shown in the issue description) will be much easier for implementing this enhancement.

[bgardner]

Any updates on this?

[mateuswetah]

It's been almos five years now, I'm really curious to see if #74322 solved this, would be a huge win for FSE themes that rely on Duotone filters!