Custom Flow Themes

Custom flow themes allow you to personalize the look and feel of the flows. Themes can be exported and shared with other people.

Example themes

Explore the possibility of flow themes by trying a pre-built flow theme:

File format

Custom flow theme files are imported and exported using JSON. JSON files can be edited in any plain text editor (like Notepad on Windows, TextEdit on macOS, Visual Studio Code, Sublime Text, etc).

Files must be saved using the .json file extension (e.g. custom-flow-theme.json).

This is an example custom flow theme JSON file:

{
    "name": "Example",
    "canvasBackgroundColor": "#000000ff",
    "connectorLineColor": "#ff00ffff",
    "connectorLineThickness": 2,
    "shapeActionBackgroundColor": "#0000ffff",
    "shapeDecisionBackgroundColor": "#ffff00ff",
    "shapeDataBackgroundColor": "#00ff00ff",
    "shapeEndPointBackgroundColor": "#ff8800ff",
    "shapeBackstoryBackgroundColor": "#800080ff",
    "shapeCriticalBackgroundColor": "#ff0000ff"
}

Types

This is a list of all the types that are supported for settings in the custom flow theme JSON file.

Name Example Description

string

Name	Example	Description
string	`"My Custom Theme"`	String values contain characters wrapped in double quotes.
integer	`12345`	Integer values contain number characters 0-9.
color	`"#ff00ffff"`	Color values are defined in the RGB color model with an alpha channel for transparency. Colors are written in the `"#RRGGBBAA"` hexadecimal string notation. R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, a-f or A-F). If alpha is set to `ff`, the color is opaque with no transparency. If alpha is set to `00`, the color is fully transparent. An unspecified value, `null` value, `""` empty value, or other invalid values will fallback to using the default theme's value.

"My Custom Theme"

String values contain characters wrapped in double quotes.

integer

12345

Integer values contain number characters 0-9.

color

"#ff00ffff"

Color values are defined in the RGB color model with an alpha channel for transparency. Colors are written in the "#RRGGBBAA" hexadecimal string notation. R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, a-f or A-F).

If alpha is set to ff, the color is opaque with no transparency. If alpha is set to 00, the color is fully transparent.

An unspecified value, null value, "" empty value, or other invalid values will fallback to using the default theme's value.

Settings

All of the settings in a custom flow theme are optional unless they're listed as Required.

Base

Setting	Type	Description
`name`	string	Required. The name of this custom flow theme.

Canvas

Theme settings for each flow's canvas - the surface containing the shapes and connectors.

Setting	Type	Description
`canvasBackgroundColor`	color	Background color for the canvas.

Connectors

Theme settings for each flow's connectors/arrows.

Setting Type Description

connectorLineColor color Line color for connectors.

Setting	Type	Description
`connectorLineColor`	color	Line color for connectors.
`connectorLineThickness`	integer	Line thickness for connectors. Possible values: `1` – use thin lines. `2` – use thick lines.
`connectorTextColor`	color	Text color for connectors.

connectorLineThickness

integer

Line thickness for connectors. Possible values:

1 – use thin lines.
2 – use thick lines.

connectorTextColor color Text color for connectors.

Shapes - base

Theme settings that don't apply to a specific shape style.

Setting	Type	Description
`shapeHighlightColor`	color	The color used when navigating back to a flow to highlight a shape that was previously clicked.

Shapes - action

Theme settings that apply to all Action shapes.

Setting	Type	Description
`shapeActionBackgroundColor`	color	Background color for shapes.
`shapeActionBackgroundHoverColor`	color	Background color for shapes when the mouse is over the shape.
`shapeActionBorderColor`	color	Border color for shapes.
`shapeActionBorderHoverColor`	color	Border color for shapes when the mouse is over the shape.
`shapeActionShadowColor`	color	Drop shadow color for shapes. The shadow is small by default, medium when the whole shape is clickable (like a flow link or pop up shape), and large when the mouse is over the clickable shape.
`shapeActionIconColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes).
`shapeActionIconHoverColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes) when the mouse is over the shape.
`shapeActionBasicBodyTextColor`	color	Text color for basic "Text" shapes.
`shapeActionBasicBodyTextLinkColor`	color	Link text color for basic "Text" shapes.
`shapeActionBasicBodyTextLinkHoverColor`	color	Link text color for basic "Text" shapes when the mouse is over the link.
`shapeActionFlowLinkNameColor`	color	Flow name color for flow "Link" shapes.
`shapeActionFlowLinkNameHoverColor`	color	Flow name color for flow "Link" shapes when the mouse is over the shape.
`shapeActionFlowLinkNameUnderlineColor`	color	Flow name underline color for flow "Link" shapes.
`shapeActionFlowLinkNameUnderlineHoverColor`	color	Flow name underline color for flow "Link" shapes when the mouse is over the shape.
`shapeActionPopUpBodyTextColor`	color	Title text color for "Pop Up" shapes.
`shapeActionPopUpBodyTextHoverColor`	color	Title text color for "Pop Up" shapes when the mouse is over the shape.
`shapeActionPopUpBodyTextUnderlineColor`	color	Title text underline color for "Pop Up" shapes.
`shapeActionPopUpBodyTextUnderlineHoverColor`	color	Title text underline color for "Pop Up" shapes when the mouse is over the shape.

Shapes - decision

Theme settings that apply to all Decision shapes.

Setting	Type	Description
`shapeDecisionBackgroundColor`	color	Background color for shapes.
`shapeDecisionBackgroundHoverColor`	color	Background color for shapes when the mouse is over the shape.
`shapeDecisionBorderColor`	color	Border color for shapes.
`shapeDecisionBorderHoverColor`	color	Border color for shapes when the mouse is over the shape.
`shapeDecisionShadowColor`	color	Drop shadow color for shapes. The shadow is small by default, medium when the whole shape is clickable (like a flow link or pop up shape), and large when the mouse is over the clickable shape.
`shapeDecisionIconColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes).
`shapeDecisionIconHoverColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes) when the mouse is over the shape.
`shapeDecisionBasicBodyTextColor`	color	Text color for basic "Text" shapes.
`shapeDecisionBasicBodyTextLinkColor`	color	Link text color for basic "Text" shapes.
`shapeDecisionBasicBodyTextLinkHoverColor`	color	Link text color for basic "Text" shapes when the mouse is over the link.
`shapeDecisionFlowLinkNameColor`	color	Flow name color for flow "Link" shapes.
`shapeDecisionFlowLinkNameHoverColor`	color	Flow name color for flow "Link" shapes when the mouse is over the shape.
`shapeDecisionFlowLinkNameUnderlineColor`	color	Flow name underline color for flow "Link" shapes.
`shapeDecisionFlowLinkNameUnderlineHoverColor`	color	Flow name underline color for flow "Link" shapes when the mouse is over the shape.
`shapeDecisionPopUpBodyTextColor`	color	Title text color for "Pop Up" shapes.
`shapeDecisionPopUpBodyTextHoverColor`	color	Title text color for "Pop Up" shapes when the mouse is over the shape.
`shapeDecisionPopUpBodyTextUnderlineColor`	color	Title text underline color for "Pop Up" shapes.
`shapeDecisionPopUpBodyTextUnderlineHoverColor`	color	Title text underline color for "Pop Up" shapes when the mouse is over the shape.

Shapes - plain text

Theme settings that apply to all Plain Text shapes.

Setting	Type	Description
`shapePlainTextBackgroundColor`	color	Background color for shapes. Note: This setting is currently not used as plain text shapes have a transparent background.
`shapePlainTextBackgroundHoverColor`	color	Background color for shapes when the mouse is over the shape.
`shapePlainTextBorderColor`	color	Border color for shapes. Note: This setting is currently not used as plain text shapes have a transparent border.
`shapePlainTextBorderHoverColor`	color	Border color for shapes when the mouse is over the shape.
`shapePlainTextShadowColor`	color	Drop shadow color for shapes. Plain text shapes have a transparent background. The shadow is only visible when the mouse is over a shape that is clickable (like a flow link or pop up shape).
`shapePlainTextIconColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes).
`shapePlainTextIconHoverColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes) when the mouse is over the shape.
`shapePlainTextBasicBodyTextColor`	color	Text color for basic "Text" shapes.
`shapePlainTextBasicBodyTextLinkColor`	color	Link text color for basic "Text" shapes.
`shapePlainTextBasicBodyTextLinkHoverColor`	color	Link text color for basic "Text" shapes when the mouse is over the link.
`shapePlainTextFlowLinkNameColor`	color	Flow name color for flow "Link" shapes.
`shapePlainTextFlowLinkNameHoverColor`	color	Flow name color for flow "Link" shapes when the mouse is over the shape.
`shapePlainTextFlowLinkNameUnderlineColor`	color	Flow name underline color for flow "Link" shapes.
`shapePlainTextFlowLinkNameUnderlineHoverColor`	color	Flow name underline color for flow "Link" shapes when the mouse is over the shape.
`shapePlainTextPopUpBodyTextColor`	color	Title text color for "Pop Up" shapes.
`shapePlainTextPopUpBodyTextHoverColor`	color	Title text color for "Pop Up" shapes when the mouse is over the shape.
`shapePlainTextPopUpBodyTextUnderlineColor`	color	Title text underline color for "Pop Up" shapes.
`shapePlainTextPopUpBodyTextUnderlineHoverColor`	color	Title text underline color for "Pop Up" shapes when the mouse is over the shape.

Shapes - data

Theme settings that apply to all Data shapes.

Setting	Type	Description
`shapeDataBackgroundColor`	color	Background color for shapes.
`shapeDataBackgroundHoverColor`	color	Background color for shapes when the mouse is over the shape.
`shapeDataBorderColor`	color	Border color for shapes.
`shapeDataBorderHoverColor`	color	Border color for shapes when the mouse is over the shape.
`shapeDataShadowColor`	color	Drop shadow color for shapes. The shadow is small by default, medium when the whole shape is clickable (like a flow link or pop up shape), and large when the mouse is over the clickable shape.
`shapeDataIconColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes).
`shapeDataIconHoverColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes) when the mouse is over the shape.
`shapeDataBasicBodyTextColor`	color	Text color for basic "Text" shapes.
`shapeDataBasicBodyTextLinkColor`	color	Link text color for basic "Text" shapes.
`shapeDataBasicBodyTextLinkHoverColor`	color	Link text color for basic "Text" shapes when the mouse is over the link.
`shapeDataFlowLinkNameColor`	color	Flow name color for flow "Link" shapes.
`shapeDataFlowLinkNameHoverColor`	color	Flow name color for flow "Link" shapes when the mouse is over the shape.
`shapeDataFlowLinkNameUnderlineColor`	color	Flow name underline color for flow "Link" shapes.
`shapeDataFlowLinkNameUnderlineHoverColor`	color	Flow name underline color for flow "Link" shapes when the mouse is over the shape.
`shapeDataPopUpBodyTextColor`	color	Title text color for "Pop Up" shapes.
`shapeDataPopUpBodyTextHoverColor`	color	Title text color for "Pop Up" shapes when the mouse is over the shape.
`shapeDataPopUpBodyTextUnderlineColor`	color	Title text underline color for "Pop Up" shapes.
`shapeDataPopUpBodyTextUnderlineHoverColor`	color	Title text underline color for "Pop Up" shapes when the mouse is over the shape.

Shapes - end point

Theme settings that apply to all End Point shapes.

Setting	Type	Description
`shapeEndPointBackgroundColor`	color	Background color for shapes.
`shapeEndPointBackgroundHoverColor`	color	Background color for shapes when the mouse is over the shape.
`shapeEndPointBorderColor`	color	Border color for shapes.
`shapeEndPointBorderHoverColor`	color	Border color for shapes when the mouse is over the shape.
`shapeEndPointShadowColor`	color	Drop shadow color for shapes. The shadow is small by default, medium when the whole shape is clickable (like a flow link or pop up shape), and large when the mouse is over the clickable shape.
`shapeEndPointIconColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes).
`shapeEndPointIconHoverColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes) when the mouse is over the shape.
`shapeEndPointBasicBodyTextColor`	color	Text color for basic "Text" shapes.
`shapeEndPointBasicBodyTextLinkColor`	color	Link text color for basic "Text" shapes.
`shapeEndPointBasicBodyTextLinkHoverColor`	color	Link text color for basic "Text" shapes when the mouse is over the link.
`shapeEndPointFlowLinkNameColor`	color	Flow name color for flow "Link" shapes.
`shapeEndPointFlowLinkNameHoverColor`	color	Flow name color for flow "Link" shapes when the mouse is over the shape.
`shapeEndPointFlowLinkNameUnderlineColor`	color	Flow name underline color for flow "Link" shapes.
`shapeEndPointFlowLinkNameUnderlineHoverColor`	color	Flow name underline color for flow "Link" shapes when the mouse is over the shape.
`shapeEndPointPopUpBodyTextColor`	color	Title text color for "Pop Up" shapes.
`shapeEndPointPopUpBodyTextHoverColor`	color	Title text color for "Pop Up" shapes when the mouse is over the shape.
`shapeEndPointPopUpBodyTextUnderlineColor`	color	Title text underline color for "Pop Up" shapes.
`shapeEndPointPopUpBodyTextUnderlineHoverColor`	color	Title text underline color for "Pop Up" shapes when the mouse is over the shape.

Shapes - backstory

Theme settings that apply to all Backstory shapes.

Setting	Type	Description
`shapeBackstoryBackgroundColor`	color	Background color for shapes.
`shapeBackstoryBackgroundHoverColor`	color	Background color for shapes when the mouse is over the shape.
`shapeBackstoryBorderColor`	color	Border color for shapes.
`shapeBackstoryBorderHoverColor`	color	Border color for shapes when the mouse is over the shape.
`shapeBackstoryShadowColor`	color	Drop shadow color for shapes. The shadow is small by default, medium when the whole shape is clickable (like a flow link or pop up shape), and large when the mouse is over the clickable shape.
`shapeBackstoryIconColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes).
`shapeBackstoryIconHoverColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes) when the mouse is over the shape.
`shapeBackstoryBasicBodyTextColor`	color	Text color for basic "Text" shapes.
`shapeBackstoryBasicBodyTextLinkColor`	color	Link text color for basic "Text" shapes.
`shapeBackstoryBasicBodyTextLinkHoverColor`	color	Link text color for basic "Text" shapes when the mouse is over the link.
`shapeBackstoryFlowLinkNameColor`	color	Flow name color for flow "Link" shapes.
`shapeBackstoryFlowLinkNameHoverColor`	color	Flow name color for flow "Link" shapes when the mouse is over the shape.
`shapeBackstoryFlowLinkNameUnderlineColor`	color	Flow name underline color for flow "Link" shapes.
`shapeBackstoryFlowLinkNameUnderlineHoverColor`	color	Flow name underline color for flow "Link" shapes when the mouse is over the shape.
`shapeBackstoryPopUpBodyTextColor`	color	Title text color for "Pop Up" shapes.
`shapeBackstoryPopUpBodyTextHoverColor`	color	Title text color for "Pop Up" shapes when the mouse is over the shape.
`shapeBackstoryPopUpBodyTextUnderlineColor`	color	Title text underline color for "Pop Up" shapes.
`shapeBackstoryPopUpBodyTextUnderlineHoverColor`	color	Title text underline color for "Pop Up" shapes when the mouse is over the shape.

Shapes - critical

Theme settings that apply to all Critical shapes.

Setting	Type	Description
`shapeCriticalBackgroundColor`	color	Background color for shapes.
`shapeCriticalBackgroundHoverColor`	color	Background color for shapes when the mouse is over the shape.
`shapeCriticalBorderColor`	color	Border color for shapes.
`shapeCriticalBorderHoverColor`	color	Border color for shapes when the mouse is over the shape.
`shapeCriticalShadowColor`	color	Drop shadow color for shapes. The shadow is small by default, medium when the whole shape is clickable (like a flow link or pop up shape), and large when the mouse is over the clickable shape.
`shapeCriticalIconColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes).
`shapeCriticalIconHoverColor`	color	Icon color for shapes with icons (e.g. "Pop Up" shapes) when the mouse is over the shape.
`shapeCriticalBasicBodyTextColor`	color	Text color for basic "Text" shapes.
`shapeCriticalBasicBodyTextLinkColor`	color	Link text color for basic "Text" shapes.
`shapeCriticalBasicBodyTextLinkHoverColor`	color	Link text color for basic "Text" shapes when the mouse is over the link.
`shapeCriticalFlowLinkNameColor`	color	Flow name color for flow "Link" shapes.
`shapeCriticalFlowLinkNameHoverColor`	color	Flow name color for flow "Link" shapes when the mouse is over the shape.
`shapeCriticalFlowLinkNameUnderlineColor`	color	Flow name underline color for flow "Link" shapes.
`shapeCriticalFlowLinkNameUnderlineHoverColor`	color	Flow name underline color for flow "Link" shapes when the mouse is over the shape.
`shapeCriticalPopUpBodyTextColor`	color	Title text color for "Pop Up" shapes.
`shapeCriticalPopUpBodyTextHoverColor`	color	Title text color for "Pop Up" shapes when the mouse is over the shape.
`shapeCriticalPopUpBodyTextUnderlineColor`	color	Title text underline color for "Pop Up" shapes.
`shapeCriticalPopUpBodyTextUnderlineHoverColor`	color	Title text underline color for "Pop Up" shapes when the mouse is over the shape.

On this page