Color Themes

You may want to provide a number of color variants of your product templates to your customers. Customer's Canvas supports recoloring the templates, using the color themes to replace colors of design elements with other colors. Making separate templates for a single color variant is not a good idea because it multiplies the number of PSD templates. Fortunately, you can define color sets for a product, so-called color themes, and just toggle these sets in the web-to-print editor.

Defining Themes

In Customer's Canvas, a theme represents a set of color categories. Each color theme is an associative array, where the key is a name of the color category.

JavaScript
{
  "SkyBlue": {
    "main": "rgb(32, 83, 69)",
    "alternative": "rgb(26, 47, 41)",
    "borders": "rgb(133, 28, 101)",
    "texts": "rgb(176, 143, 37)",
    "shadows": "rgb(0, 159, 115)",
    "images": "rgb(21, 19, 15)"
  },
  "Contrast": {
    "main": "rgb(138, 135, 77)",
    "alternative": "rgb(72, 71, 58)",
    "borders": "rgb(93, 53, 128)",
    "texts": "rgb(124, 15, 218)",
    "shadows": "rgb(0, 88, 0)",
    "images": "rgb(72, 71, 58)"
  }
}

In this example, we define two color themes: SkyBlue and Contrast. The main, alternative, borders, and other properties are the color categories. Note, you can define as many color themes as you need, but they should have the same number of color categories and the same category names. You can define such color sets in ~\Configuration\clientConfig.json to apply them globally. Also, you can apply them to a single product through the IConfiguration interface. In the latter case, you can pass these themes to the loadEditor method as a parameter.

JavaScript
// Define a color set.
var productTheme = {
    "SkyBlue": {
        "main": "rgb(32, 83, 69)",
        "alternative": "rgb(26, 47, 41)",
        "borders": "rgb(133, 28, 101)",
        "texts": "rgb(176, 143, 37)"
    } 
};

// Set up the color theme for your product.
var configuration = {
    productThemes: productTheme,
    defaultProductTheme: "SkyBlue"
};

// Load the editor.
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);

Preparing Templates

After you have defined the color themes, you need to prepare your PSD templates so that they can apply the theme colors. To perform this, you can either add the <THMB> marker to layer names in PSD templates or define the themeBinding property in JSON files.

Using the Marker in PSD Templates

Each design element can have a number of colors, for example, the fill and border colors. When you define the color theme of an element, you can specify a color for every colorable property through the <THMB> marker as follows:

<THMB_propertyName1:colorName1;propertyName2:colorName2>

In this marker, you list the property-value pairs. Note that the color names must match the names in the theme definition. The following table contains design elements and their colorable properties supported in Customer's Canvas.

Design elements Colorable properties Marker examples
Image
  • img - image color
  • border - border color
<THMB_img:main;border:borders>
Line, polyline
  • line - line color
<THMB_line:main>
Ellipse, rectangle, and shape
  • fill - fill color
  • border - border color
<THMB_border:borders>
All text types
  • text - text color
  • stroke - stroke color
  • shadow - shadow color
<THMB_shadow:shadows;text:main>
Placeholder
  • img - image color
  • border - border color
<THMB_img:main;border:borders>
Background
  • fill - fill color
<THMB_fill:alternative>

You can omit some properties in these bindings, for example, you can bind only the text color for texts: <THMB_text:main>.

Using External JSON Files

Alternatively to the previous way, you can use JSON files to set up markers for your templates. The following example demonstrates how you can bind theme colors using the themeBinding property.

JavaScript
{
    "frames": {
        "CentralImage": {
            "themeBinding": {
                "img": "main",
                "border": "borders"
            }
        }
    }
} 

Here, CentralImage is the name of an image layer, and themeBinding is an object binding the colorable properties to the theme colors.

For more details about setting up the markers through JSON files, refer to the Setting Markers Outside of PSD Files topic.

Color Overlay

You may notice that you can specify a theme color even for raster images. By default, Customer's Canvas recolors them in the same way as you would apply this color with the Hard Light blend mode and 80% opacity to the original image in Photoshop.

If you specify color overlay options in a PSD template, these options are applied to the corresponding design element on the canvas. If you additionally specify a theme color, then Customer's Canvas applies the theme color, blend mode, and opacity to the original image.

At the moment, the Customer's Canvas supports the following blend modes:

  • Color Burn
  • Color Dodge
  • Darken
  • Difference
  • Exclusion
  • Hard Light
  • Lighten
  • Multiply
  • Normal
  • Overlay
  • Screen
  • Soft Light

Changing Color Themes at Runtime

At runtime, you can switch themes through the applyProductTheme method. This method applies the color theme to a current product without reloading the editor. It accepts either a theme name or an object containing the color sets.

JavaScript
// Enable the SkyBlue theme.
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition,
    { defaultProductTheme: "SkyBlue" })
    // If the editor has been successfully loaded.
    .then(function (editor) {
        // Change the color theme.
        editor.applyProductTheme({ "Contrast" });
    });

An Example of Recoloring Templates

As an example, let us describe how you can design and recolor a wedding invitation. In Photoshop, we designed the following template.

Preparing a PSD template for a wedding invitation.

To keep it short, we use the C01, C02, and C03 color categories in the <THMB> marker. Let us assign the following colors to them with the White and Green themes.

Color category The White theme The Green theme
C01 rgb(30,30,59) rgb(200,220,190)
C02 rgb(185,90,155) rgb(200,190,0)
C03 rgb(255,255,255) rgb(61,85,51)

Put the PSD template in the ~\ProductTemplates\designs\ folder and use the following code example to open it.

HTML
<!DOCTYPE html>
<head>
    <title>Customer's Canvas Color Themes Example</title>
    <!-- Change this URL to the address of your application. -->
    <script id="CcIframeApiScript" type="text/javascript"
        src="http://example.com/customersCanvas/Resources/SPEditor/Scripts/IFrame/IframeApi.js">
    </script>
</head>

<body onLoad="init();">
    <!-- The iframe to display the editor in. -->
    <iframe id="editorFrame" width="100%" height="800px"></iframe>
    <!-- The White and Green buttons that change the themes. -->
    <button onClick="applyTheme('White');">White</button>
    <button onClick="applyTheme('Green');">Green</button>
</body>

<script>
var editor = null;
function init(){
    // Initialize a product.
    productDefinition = { surfaces: ["Invitation"] };
    // Define two color themes and select the default theme.
    var productTheme = {
        "White": {
            "C01": "rgb(30,30,59)",
            "C02": "rgb(185,90,155)",
            "C03": "rgb(255,255,255)"
        },
        "Green": {
            "C01": "rgb(200,220,190)",
            "C02": "rgb(200,190,0)",
            "C03": "rgb(61,85,51)"
        }
    };
    var configuration = { productThemes: productTheme };
    // Get the iframe element to display the editor in.
    var iframe = document.getElementById("editorFrame");
    // Load the editor.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration)
        // If the editor has been successfully loaded.
        .then(function (e) {
            editor = e;
        })
        // If there was an error thrown when loading the editor.
        .catch(function (error) {
            console.error("The editor failed to load with an exception: ", error);
        });
}

// Change a theme.
function applyTheme(themeName){
    editor.applyProductTheme(themeName);
}
</script>
</html>

Using the Green and White buttons, you can apply these theme colors to the template and obtain the following results in Customer's Canvas.

Recoloring PSD templates.

See Also

Manual

IFrame API Reference

Downloads