Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Integration Hub
  • Contact Us
  • Docs home
  • Mobile Experiences
  • Building Mobile Experiences

Mobile Styling Themes

Updated at July 8th, 2025

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Installation & Developers
    Installation Overview Installing Appcues on Web Installing Appcues on Mobile API & Data Troubleshooting
  • Web Experiences
    Flows Launchpads Pins Checklists Banners NPS Surveys & Forms Targeting and Triggering Customization & Styling Troubleshooting Use Cases FAQ
  • Mobile Experiences
    Installation & Overview Building Mobile Experiences Mobile Analytics & Integrations Troubleshooting
  • Workflows
    Building & Configuration Use Cases Workflow Analytics and Integrations
  • Account Management
    Users & Data Subscription
  • Analytics & Data
    Experience and Event Analytics Users & Accounts
  • Best Practices
    Best Practices Use Cases Pro Tips Product-led Growth
  • Integrations
    Integration Documents Use Cases Extras
  • System Status
    System Status & Incidents
+ More

Table of Contents

Using Themes Creating and Editing a Theme Applying a Theme to a Flow Overriding Theme Styles Creating and Managing Theme Variants Best Practices Adopting Themes With Existing Flows Adopting Themes as a New User Themes and Templates

 🧪 Mobile themes are currently in beta

Please contact Appcues support if you are interested in joining the beta group.

 

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.

This doc covers mobile themes, which are currently a separate feature from web Flow themes. Information about Web themes can be found here.

 

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.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Mobile Integrations
  • Mobile Overview
  • Add Videos to Mobile Flows
Appcues logo

Product

Why Appcues How it works Integrations Security Pricing What's new

Use cases

Appcues Integration Hub User Onboarding Software Feature Adoption Software NPS & Surveys Announcements Insights Mobile Adoption

Company

About
Careers

Support

Developer Docs Contact

Resources

The Appcues Blog Product Adoption Academy GoodUX Case studies Webinar Series Made with Appcues Appcues University

Follow us

Facebook icon Twitter icon grey Linkedin icon Instagram icon
© 2022 Appcues. All rights reserved.
Security Terms of Service Privacy Policy

Knowledge Base Software powered by Helpjuice

Expand