How-to Guides
Customizing Themes
With themes, you can design flows and other UserTour content to seamlessly integrate with your app. We provide a powerful yet user-friendly visual editor that requires no CSS or programming knowledge to modify every element of your theme.
Creating a theme
To modify or create a new theme, follow these steps:- Select Settings > Themes from the sidebar
- Click New Theme or select an existing standard theme
- To edit an existing standard theme, click the three dots in the top-right corner of each theme card, then click Duplicate theme to customize
Designing your first theme
We recommend starting by adjusting these options:Base colors
Choose your Brand Background Color and Main Text Color. All other elements and hover/active states will automatically match.Font
Select your app’s font. We support all standard fonts and Google fonts out of the box. For other fonts, please contact us. In the preview area, you can see a live example of what your theme looks like.
Other elements you can modify
- Font sizes
- Button size, position, and colors
- Tooltip size, position, and colors
- Checklist size, position, and colors
Conditional variations
You can create conditional overrides of your theme based on user (and company) attributes and URLs (via current page conditions). Use cases include:
Supporting dark and light modes
Support both dark and light modes in a single theme. This requires your UserTour.js snippet to pass a user attribute indicating whether the user is in dark or light mode.Mobile responsiveness
Adjust sizing for mobile devices.Conditional color changes
Change the color of content based on company or user attributes, or the URL the user is currently on. For example, to handle white-labeled versions of your software with different color schemes.
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 set a new theme as your default theme, which means it will be used by default for all new content. You can change the theme on specific flows, checklists, and launchers. Click the three dots menu in the top-right corner of the theme card to promote a theme to be the default theme.
Applying themes to content
You can change the theme for flows, checklists, and launchers via the Theme button in the builder.