Skip to content

Duotone: Dynamic filters based on theme.json variables #33905

@MaggieCabrera

Description

@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:

Columns in container

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Block] CoverAffects the Cover Block - used to display content laid over a background image[Block] ImageAffects the Image Block[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions