---
title: "Interface: ISpotlightStyle | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.ISpotlightStyle/"
---

# Interface: ISpotlightStyle

> A structure defining the appearance of highlighted objects.

## Example

``` json
 "canvas": {
   "style": { 
     "spotlight": {
       "color": "orange",
       "width": 1,
       "fillColor": "rgba(0,192,0,0.3)",
       "dashPattern": [1, 3, 2],
       "showLabel": false,
       "textColor": "rgb(0,0,192)"
     }
   }
 }
```

## Properties

### color

> **color**: `string`

The color of the selection border, in the RGBA format. The default value is "rgba(255,0,0,1)".

***

### width

> **width**: `number`

The selection border width, in pixels. The default value is 2.

***

### fillColor

> **fillColor**: `string`

The fill color of the selection, in the RGBA format.

***

### showLabel

> **showLabel**: `boolean`

If true, displays the design element name. The default value is true.

***

### textStyle

> **textStyle**: `string`

The text style of the design element name. The default value is "normal 12px Roboto".

***

### textColor

> **textColor**: `string`

The color of the design element name, in the RGBA format.

***

### dashPattern

> **dashPattern**: `number`[]

The style of dashes of the selection border, as an array of numbers, which mean the length of the dash or gap in the dashed line.