# Add Brand Duotone Filters for Images

> Adds duotone image filters in your brand colors to the Image and Cover block toolbars, for a consistent photo style across the site.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: theme-json, duotone, images
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/themejson-brand-duotone/

## Code

```php
// Duotone presets: slug => [name, dark color, light color].
$wpide_duotones = array(
    'wpide-navy-cream' => array( 'Navy and cream', '#1e293b', '#fef3c7' ),
    'wpide-teal-white' => array( 'Teal and white', '#134e4a', '#f0fdfa' ),
);

add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_duotones ) {
    $data    = $theme_json->get_data();
    $current = isset( $data['settings']['color']['duotone'] ) ? (array) $data['settings']['color']['duotone'] : array();
    $current = isset( $current['theme'] ) ? (array) $current['theme'] : $current;
    $by_slug = array();

    foreach ( $current as $preset ) {
        if ( isset( $preset['slug'] ) ) {
            $by_slug[ $preset['slug'] ] = $preset;
        }
    }

    foreach ( $wpide_duotones as $slug => $duotone ) {
        $by_slug[ $slug ] = array( 'slug' => $slug, 'name' => $duotone[0], 'colors' => array( $duotone[1], $duotone[2] ) );
    }

    return $theme_json->update_with( array(
        'version'  => WP_Theme_JSON::LATEST_SCHEMA,
        'settings' => array( 'color' => array( 'duotone' => array_values( $by_slug ) ) ),
    ) );
} );
```

## Notes

Each filter maps shadows to the first color and highlights to the second.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add Brand Duotone Filters for Images" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/