The focus of our building experience is to provide you with great-looking defaults, so you can make Flow content quickly. But we also support much deeper customization of your styling - so you can make your content feel on-brand and native to your application.

Using Themes

Themes are for creating standardized, repeatable styles for your mobile Flows. Product designers can create a theme to match your app's brand guidelines so Flows feel native to your end-users. A theme can then be applied to your Flows – giving teammates more freedom to focus on the messaging content. 

Themes include basic options for things fonts, colors, and button styling. Dark and light mode versions can also be set for a theme. As you'll see later in this doc, you can also create variants within a theme, which allow you to set separate rules beyond the default for different text and button styles.

Creating and Editing a Theme

To create a new theme, click the Edit Flow Details icon on the bottom bar of the mobile builder. In the Theme dropdown, click Create new theme. Give your theme a name and click Create.

To edit an existing theme, click Edit Theme in the sidebar.

Applying a Theme to a Flow

By default, a newly created Flow will have your account's first-created Theme applied to the Flow. To apply a different theme to Flow, click the edit icon on the bottom bar in the builder and select the theme you want in the Edit Flow modal.

Overriding Theme Styles

Once a theme is selected, it will apply the basic theme style to all content already built in your Flow. After a theme is applied, you're still able to edit styles on individual content blocks. If a style you manually edit overrides a style applied from the theme, or if a new theme you applied contains different styles than you've already customized on the Flow, we will let you know in the Theme overrides section that will appear in the editing panel of the current content block. In this section, you can:

• Reset the individual style to match the theme by clicking on the reset icon next to each style
• Reset all overridden styles on that block to match the theme by clicking the Reset instance button
• Save the overridden styles on that block as a new theme variant (read the next section for more info about variants) by clicking the Save as new option in the button dropdown
• Update the applied theme with the overridden styles by clicking the Update original option in the button dropdown (Note: this will apply the new styles to all content across any Flow using that theme)

Creating and Managing Theme Variants

The theme's settings let you set basic styles across all your text, image, and button Flow content. If you need more detailed styles for different types of content, you can use theme variants. Variants let you save and reuse styles across individual instances of a content block in your Flow, without overriding the default theme styles across the rest of your content. You can use theme variants for things like:

• Creating separate text styles for your H1, H2, and paragraph text content
• Managing different styles for your primary, secondary, and tertiary buttons

To create a new variant within a theme, first apply a theme to a Flow. Next, begin editing a content block to match the new style you want. As discussed in the previous section, styles that override the theme will cause the Theme overrides section to appear. Finish creating the styles you want (for example, a secondary button), and select Save as new from the button dropdown.

Give the variant a name that describes its purpose so the rest of your team will know how to use it. Then click Save.

Now you'll be able to easily select that variant from the styling panel whenever you need to style a secondary button in the future.

You can always update your variant styles by selecting Update original in the button dropdown in the Theme overrides section.

Visuals of all your image, button, and rich text block variants appear in the preview in the Edit theme screen.

Best Practices

Adopting Themes With Existing Flows

If you have existing Mobile Flows created that don't utilize themes, you can add the styles you've already defined in the Mobile Builder to your theme to create a foundation for easily styling your future Flows:

1. Open the Flow containing the styles you'd like to include in your theme in the Mobile Builder.
2. Apply the theme you'd like to update to the flow. The theme will be added to your Flow, attaching the default variant to each element while preserving all your current styles as Theme overrides.
3. For each style you'd like you include in the theme:
   1. Select the element (a modal or tooltip container, a text block, a button, a rating block, etc). You'll notice that the element has the Default theme variant applied with a set of overrides that capture your specific styles.
   2. Expand the Theme overrides panel, and, from the button dropdown at the bottom, select Update original if you'd like to update the default theme style (e.g. for a primary button), or Save as new if you'd like to create a theme variant to provide additional style options (e.g. for a secondary button)
   3. Confirm that you'd like to update or save the variant. You'll notice that there are no longer any Theme overrides listed because all the styles for the element are now included in the selected theme variant!
   4. Repeat for each element in your Flow.
4. Repeat steps 1-3 for other Flows that contain styles you'd like to include in your theme. For example, you might add styles for a Mobile Embed.
5. Create a new Flow and observe that the default styles of the modal container, text, and buttons now match the styles you saved!

You can update your existing Flows to use your new theme, but it's also ok to leave them and just use your theme for new Flows.

Adopting Themes as a New User

If you do not have any existing Mobile Flows, you can create a theme with your first Flow to ensure all your Flows have exactly the style and appearance you want:

1. Create a new Flow, and, in the Mobile Builder, create a new theme and save it to your flow. The first theme you create will be your default theme for future Flows.
2. Open the general theme editor by clicking Edit theme in the sidebar. Add your specific brand colours and adjust the Interface settings until they generally match your desired appearance. Don't worry—you can tweak the details later! Save your changes.
3. Make style changes to your Flow in the Mobile Builder to create exactly the look you want: add custom fonts, tweak spacing, update borders, etc.
   1. Any changes you make will be indicated in the  Theme overrides panel. Once you're satisfied with your styling, expand the Theme overrides panel, and, from the button dropdown at the bottom, select Update original.
   2. Confirm that you'd like to update or save the variant. You'll notice that there are no longer any Theme overrides listed because all the styles are now included in the theme variant, ready to be used in the future.

Themes and Templates

The Mobile Builder also supports step templates to allow you to reuse common content across multiple Flows. Step templates store the structure of your content while themes contain the styles of that content. 

When inserting a step template, the default theme style will be applied to the content of the template. You can save a template that uses theme variants so that future use of the template will use those variants instead of being set to the default theme style.