---
title: "IThemeBindingData | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IThemeBindingData/"
---

# IThemeBindingData

> A structure defining default colors and styles of design elements.

## Interfaces

### IThemeBindingData

#### Remarks

You can specify `themeBinding` in both [IItemData](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData.md) and [IDefaultItemsConfig https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/idefaultitemsconfig.html\|IDefaultItemsConfig](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/idefaultitemsconfig.html).

#### Example

```json
{
   "defaultItemsConfig": {
       "text": {
           "themeBinding": {
               "styles": ["FancyText"]
           }
       },
       "image": {
           "themeBinding": {
               "img": "MainColor",
               "border": "BorderColor"
           }
       }
   }
}
```

#### Properties

##### barcode?

```ts
optional barcode?: string;
```

##### border?

```ts
optional border?: string;
```

The border color.

##### fill?

```ts
optional fill?: string;
```

The fill color.

##### img?

```ts
optional img?: string;
```

The color applied with the Hard Light blend mode and 80% opacity to the original image.

##### line?

```ts
optional line?: string;
```

The line color.

##### shadow?

```ts
optional shadow?: string;
```

The text shadow color.

##### stroke?

```ts
optional stroke?: string;
```

The text stroke color.

##### styles?

```ts
optional styles?: string[];
```

An array of style names.

##### text?

```ts
optional text?: string;
```

The text color.

##### textFill?

```ts
optional textFill?: string;
```