Themes

With themes, you can make flows and other Userflow content look like a native part of your app. We use a powerful, yet easy-to-use, WYSIWYG (What You See Is What You Get) no-code editor to customize all aspects of your theme. You won’t need any CSS or coding skills.

Creating a theme

To modify or create a new theme go to Settings → Themes.

From here you can either click New theme or click on an existing standard theme.

To edit an existing standard theme you will need to select it and click Duplicate to customize.

Designing your first theme

We recommend starting out by adjusting the following options:

1. Under Base colors, pick your Brand Background color and Main Text color. All other elements and hover/active states will automatically match.
2. Under Avatar, upload a photo of one of your team members or your company logo/icon.
3. Under Font, pick your app’s font. We support all standard and Google fonts out-of-the-box. For other fonts, please reach out to us.

In the Preview area, you can see a live example of what your theme looks like.

Other examples of what you can modify:

• Font sizes
• Button size, position, and colors
• Tooltip size, position, and colors
• Checklist size, position, and colors

You can change the preview content using this dropdown menu if you e.g. want to see what your theme looks like for tooltips, modals, etc.

Conditional variations

You can create conditional overrides of your theme based on user attributes. Example use cases:

• Support both dark and light mode in a single theme. This requires your Userflow.js snippet to pass a user attribute indicating whether the user is in dark or light mode.
• Adjust sizing on mobile.
• Adjust avatar or other personalization based on user attributes (e.g. match users with an avatar of their customer success manager).

Notice the “Dark Mode” condition and the overridden theme properties marked with purple text:

All overrides from all variations with true conditions, will be applied to the main theme, in the order they’re listed.

Setting a default theme

You can make the new theme your default theme, which means it will be used by default on all new content. You can change theme on specific flows, checklists, and launchers. You can promote a theme to be the default theme by clicking on the 3 dot menu next to the theme title.

Applying themes to content

You can change the theme for flows/checklists/launchers via the Show advanced settings button in the builder.

You can also change the theme for a specific flow step by clicking on its gear icon, and then picking another theme in the right side panel.

Custom CSS and buttons

As a last resort in cases where you cannot customize the look and feel using the advanced standard theme options, we do offer a custom css option.

One can insert containers in Userflow content (+ -> Container) and with custom css you can add your own custom container styles powered by CSS. In the theme designer, look for the Custom CSS section. Here you can write CSS such as this:

You can also create your own custom button styles. In the screenshot below, we have added a custom “Link” button and a custom “Sign in with Google”-style button.

Simply add a .userflow-custom-button-<name> class in your theme’s custom CSS. The style will show up in the button’s side panel in the builder.