Themes help you manage the look and feel of guides in Pendo. You can use themes to create and enforce consistent styles for layout, typography, buttons, and other design elements.
Admins and users with guide theme permissions configure themes in the Visual Design Studio, and guide creators can apply them when building guides. Themes support light and dark mode variants, and you can reuse or duplicate themes across applications to maintain brand consistency.
Themes are especially useful for:
- Applying consistent branding across multiple apps or guide types.
- Giving guide creators a reliable starting point for layouts.
- Supporting accessibility and dark mode variants.
You can set up multiple themes for different products or campaigns. Each app in your subscription can have its own theme, or you can duplicate themes across apps to maintain consistency. Lightboxes, tooltips, banners, and embedded guides can all be styled independently using themes.
Requirements
To create and apply themes, you must meet the following role requirements:
- Pendo subscription admins and users with guide theme permissions can create, duplicate, and delete themes.
- Pendo users with guide creation permissions can apply themes in the Visual Design Studio.
Default theme
Each application has one default theme that can't be deleted. You can rename and fully configure the styles in this theme. The easiest way to recognize the default theme is to find the theme that doesn't have a delete (trash can) icon when you hover over it.
Create or edit a theme
A subscription admin or a user with guide theme permissions, can create a new theme or edit an existing one from the Themes page in Pendo.
This page lists all current themes for the selected applications. If no one has created a theme yet, the list populates with the default theme for the selected apps.
- From the top-right corner of Pendo, select the Settings icon and choose Themes.
- To create a new theme, select + Create theme in the top-right corner.
To edit an existing theme, hover over it and select Edit Theme. - Enter the app URL, then select Launch Designer. The Visual Design Studio opens in a new tab, where you can configure all theme styles.
The theme editor includes two panels:
- The left panel lists theme elements, including Guide Container, Typography, Buttons, and Horizontal Line.
- The right panel displays the configuration options for the selected element. Any changes update the preview in the left panel in real time.
Guide container styles
In the left panel, select a guide container to view its style options in the right panel. If your Pendo plan includes Guides Pro, you can choose between Overlay guides and Embedded guides. Each container type has its own configuration options.
Tip: Turn on Advanced Options at the top of the right panel to show additional properties, such as Supplemental Styles.
Use the tabs to switch between Light and Dark mode. Each color mode is configured separately. In dark mode, only color settings are available. Light mode includes all available style properties. For more information, see Color modes.
Use the right panel to configure the following properties:
- Background color
- Border width, color, and radius
- Caret size and dimensions
- Drop shadow color, angle, distance, blur, and size*
- Close button color, hover color, weight, size, and position*
- Backdrop color
- Z-index value
- Supplemental CSS styles*
*Must have Advanced Options turned on.
Typography styles
In the left panel, select a typography element (Title, Sub Title, Paragraph, Link) to open its corresponding style options in the right panel. You can configure:
- Font family
- Font weight, size, color, and decoration (Underline)
- Text transform*
- Line height*
- Letter spacing*
*Must have Advanced Options turned on.
Note: The Font Family list shows default browser fonts. If your app already defines a font family, choose Inherit to use it, or manually enter the font name for a secondary typeface.
Button styles
In the left panel, select a button element (Primary, Secondary, Tertiary) to open its settings in the right panel. Each button has different default and hover styles you can define. Use the panel to set up the following properties:
Default styles
- Background color
- Border width, color, and radius
- Font family
- Font weight, size, color
- Text transform*
- Letter spacing*
- Padding
*Must have Advanced Options turned on.
Note: The Font Family dropdown list shows default browser fonts. If you already use a font family within your app, choose Inherit to use it. If you're trying to use a secondary font family that's included in your style, enter the font name.
Hover styles
- Background color
- Border color
- Font weight and color
Horizontal line styles
Select the Horizontal line element to open the Horizontal Line Styles panel on the right side of the page. Use the panel to set up the following line properties and line type:
- Color
- Thickness
- Type (Web guides only)
- Solid
- Dotted
- Dashed
Advanced CSS in themes (supplemental styles)
Use advanced CSS in themes to add CSS that becomes part of the theme. These styles apply wherever the theme is used. This is available for web themes only.
- Turn on Advanced Options in the right panel to access Supplemental Styles.
- Add only brand-level rules you want to reuse across guides.
/* Guide Container Size */
._pendo-step-container-size {
}
/* Guide Backdrop */
._pendo-backdrop {
}
/* Guide Container Style */
._pendo-step-container-styles {
}
/* Close Guide "X" */
._pendo-close-guide {
}Tip: Keep these rules minimal so theme changes are predictable when creators apply or reapply a theme.
Add a CSS class to a theme
You can add a CSS class to a guide at the guide’s container level so that it inherits styling from your application’s stylesheet. This is done inside a Theme so that you can apply the class across many guides. The Inherit option allows Pendo to use the styling options that are already coded by your developers within your application.
Within the CSS, the newly applied CSS class must also have the ID associated with the Pendo guide container's:
- Size
- Backdrop
- Style
- Close guide "X".
When you add a CSS class to a theme, you add the main class, not the Pendo ID, into the text box to pull the CSS that the guide should inherit from the app.
Note: Changes to the CSS aren't shown in the guide layout selection.
To add a CSS class to the theme:
- Set a CSS class style.
- In the Guide Container Styles panel, turn on Advanced Options.
- Locate the Supplemental Styles section and enter a name for the CSS class.
Color modes
Themes include two color modes that you can configure separately: Light and Dark. These color modes allow you to create different visual styles for your guides within the same theme.
Color modes are available for every theme element. You can configure separate color properties for each element in both the Light and Dark tabs of the theme editor.
In the theme editor, use the tabs at the top of the right panel to switch between color modes. Light mode includes all available style properties, while dark mode includes only color properties. Each mode must be styled individually.
When you configure dark mode, you must enter a CSS selector in the Dark mode selector field that identifies when the dark mode styles should apply. The selector must be present in the visitor's browser when the guide loads, such as a class applied to the <body> or root element when dark mode is active.
When the CSS selector is detected, Pendo automatically applies the dark mode styles. You can preview both color modes directly in the theme editor and adjust each as needed.
Tip: Use your browser’s developer tools or ask your development team to confirm the correct CSS selector for dark mode in your application.
You can also apply color mode variants at the guide or block level by selecting Custom in the theme dropdown. This allows you to configure and preview both light and dark styles for a specific guide or element in the Visual Design Studio.
Dark mode for mobile themes
For mobile guides, dark mode is determined by a visitor metadata property instead of a CSS selector.
To configure dark mode for mobile themes:
- Open or create a theme used for mobile guides.
- In the Dark tab, select a property from the Dark mode visitor data property dropdown. If no property is selected, dark mode styles aren’t applied.
- Choose your dark mode styling, including background, title, and button colors.
- Select Save.
When a guide uses this theme and Dark mode is selected, Pendo checks the selected visitor property. If the property is present and set to true, the dark theme styling is applied.
For mobile guides, dark mode depends on metadata passed when a session starts. Your app sends a visitorId along with optional properties, such as age, country, role, or dark_theme. If you pass a property such as dark_theme = true, you can reference that same property in the theme settings to control when dark mode appears.
Customize dark mode colors for mobile guides
When configuring dark mode for guides shown in mobile apps, you can define colors for individual components of the guide container.
Available options include:
- Background color
- Border color
- Close button color
- Backdrop color
Select a color field to enter a hex value or choose a color from the picker. These colors apply when the selected visitor property triggers the dark mode variant.
Supported guides and elements
Most guide and Resource Center elements support color modes when configured in a theme. This includes overlay and embedded guides, buttons, text, and date blocks. The Resource Center also supports dark mode for most modules.
Some elements and modules have limited support or require additional setup:
- Polls and task lists. Not styled by themes. You can customize these directly in the Visual Design Studio.
- NPS surveys. Some elements are styled by themes, but not all color properties are applied in dark mode.
- Resource Center announcements. Require opening the Resource Center in the Visual Design Studio and saving for dark mode changes to apply.
- Horizontal lines. Dark mode styles are not yet applied to this element.
- Images. Images aren't replaced or adjusted for dark mode. Use images with transparent backgrounds for best results.
Apply a theme or theme styles
When you have multiple themes and styles, you and other guide creators can apply them to your guides in the Visual Design Studio.
Important: When you update a theme, existing guides using that theme aren't updated automatically. To apply changes, open the guide in the Visual Design Studio, reapply the theme, and save. When you reapply a theme, steps or elements that were previously customized might switch to the Custom theme. Review those elements before saving.
Apply a theme to a guide
- In a guide step, select the border of the guide container to open the container settings.
- Within the Styling tab, select a Theme from the dropdown menu. Admins or users who can create guides from scratch can select Custom, which displays all styling settings and overrides the theme to further customize the look and feel of your guide.
Applying a new theme to a guide overrides the theme settings of a building block. For example, if you have a primary button with a dark theme and you apply your new light theme, the button uses the primary button style you have set in your light theme.
Apply a theme style to a text block
In the Theme Style dropdown, select the Title, Sub Title, or Paragraph style to apply the typography theme style from the theme selected in the guide container.
Admins or users who can create guides from scratch can select Custom, which displays all styling settings and overrides the theme to further customize the look and feel of your guide.
Apply a theme style to a button
In the Button Style dropdown, select the Primary, Secondary, or Tertiary Button to apply button themes from the theme selected in the guide container.
Admins or users who can create guides from scratch can select Custom, which displays all styling settings and overrides the theme to further customize the look and feel of your guide.
Apply color modes to individual guides or elements
You can configure color mode styles for an individual guide or building block in the Visual Design Studio. This is useful if you want to test dark mode or apply unique styling that differs from the global theme.
- Open the guide or step you want to edit in the Visual Design Studio.
- Select Custom from the theme dropdown.
- Use the Light and Dark tabs to configure and preview both color styles.
- Save the guide to apply the selected color mode settings.
Color mode changes made at the guide or element level override the global theme for that specific guide or step.
Override theme styles with code blocks
Use code blocks to override theme styling for a specific guide step. Code block styles apply only to the step where you add them and can override theme rules if the selector is more specific.
This is best for exceptions that shouldn't change the global theme and should be used sparingly to avoid inconsistent styling across guides.
For more information on custom code blocks, see Customize your guides with code.
Note: If a guide mixes theme styling and code block overrides, the code block takes precedence for matching selectors.
Override theme styles with global CSS
Use global CSS to override theme styling for all guides at the application level.
This is best for situations where you want to make styling changes using custom code and apply them globally for all guides.
Note: A banner at the top of the Themes page alerts you if global CSS is applied to your app, which may override theme styles. For more information, see Edit the global CSS in Visual Design Studio.
Duplicate a theme
Admins and users with guide theme permissions can duplicate a theme. This is useful if you need to copy themes between apps or modify an existing theme to make a new theme.
To do so, hover over a theme, then select the duplicate icon.
This opens a dialog that prompts you to name your theme. The default name is Copy of [Original theme name]. If you have multiple apps, you must also select the app to which the theme is being duplicated.
Delete a theme
Admins and users with guide theme permissions can delete any theme other than the default theme.
To delete a theme:
- Hover over it, then select the delete (trash can) icon.
- Select Delete Theme to confirm that you want to remove it from your subscription.
If you delete a theme, no guides are affected. The guide theme changes to Custom, and you can update your guide theme separately.