Themes allow you to customize the style of embedded interfaces in order to make them blend better into the host web page. The following sections provide details on how to configure and manage themes. Once you have created your theme, learn how to apply themes to embedded interfaces.

Create a Theme

Themes are created in the Embedded Interfaces page of the Appian Administration Console. When creating a theme, you have the option to create a new theme from scratch or copy an existing theme.

Each theme has the following properties:

• Name: The name of the theme.
• Identifier: A unique identifier that is used when applying the theme to an interface when embedding it in the host web page.
• Description: An optional description.

To create a theme:

1. In the Appian Administration Console, click Embedded Interfaces.
2. Under Themes section, do one of the following:
   • Click + New Theme to create a new theme from scratch OR
   • Click the copy icon to start with a copy of an existing theme.
3. Fill in the Properties section.
4. Configure the theme by making the desired changes in the Details section. See Configure a Theme for information about the available settings.
   Tip: The fields are pre-populated with the default Appian values (or the values from the theme that you copied), so you only need to replace values that you wish to customize.
5. Click Save.

Configure a Theme

Configuring a theme involves specifying the custom font and color values that will be used to style an embedded interface. The following fields are available for configuration:

Setting	Description	Valid Values
Font Family	Defines the font family used for all text, including headings, form content, and links.	Separate font names with commas. For example, Helvetica Neue, Helvetica, Arial, sans-serif
Web Font Stylesheet URL	CSS resource that defines the font face for the specified Web font. Only required when using a Web font.	Secure URL (HTTPS). For example, https://sample.com/css?family=Sample
Base Font Size (px)	This font size is used to derive the font size of all text and headers in the embedded interface. It also increases or decreases the size of interface elements, such as buttons.	10, 11, 12, 13, 14, 15, 16, 18, 20
Page Background Color	Background color of the embedded interface.	Any valid hex code or expression evaluating to a valid hex code. We recommend that you select a light or dark background color to create sufficient contrast with foreground colors. Avoid grey colors that are similar to the color of input field borders.
Accent Color	The accent color is used to highlight key interface elements, e.g., links, milestone completed steps	Any valid hex code or expression evaluating to a valid hex code. We recommend that you select an accent color that provides sufficient contrast against the page background color. Avoid grayscale colors (black, white and gray) that are similar to colors used for interface elements and green/red that are similar to colors used to indicate positive/negative values.

Edit a Theme

To edit a theme, click the name of the theme you wish to edit. After making your desired edits, click Save.

Delete a Theme

When a theme is deleted, it is removed from the system and the identifier for that theme is available for use by another theme. Embedded interfaces that have a deleted theme applied will adopt the default Appian theme.

To delete a theme, find the theme that you wish to delete and click the delete icon for that row in the grid.