A theme defines the default styling for guide containers and building blocks. When guide creators build or edit a guide in the Visual Design Studio, the theme controls how those elements look, helping teams maintain a consistent visual style across all their guides.
Prerequisites
To edit a theme, you must be a subscription admin.
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 default theme doesn't have a delete icon.
Create or edit a theme
A subscription admin can create or edit themes from the Themes page, which lists all current themes for the selected application. If no themes have been created yet, the default theme appears.
To open the Themes page:
- From the left menu, go to Guides > Guides.
- Select Manage themes at the top of the page.
To create or edit a theme
- To create a new theme, select + Create theme in the top-right corner. To edit an existing theme, select the application from the dropdown menu, then hover over the theme you want to update and select Edit Theme.
-
Select Launch Designer to open the Visual Design Studio.
- Make your updates. See the sections below for details on each element.
- Select Save to apply your changes.
To rename the theme, select the existing name at the top and enter a new name.
Note: After you save your changes, guide steps that were built using the previous theme settings will show as Custom theme in their container settings rather than inheriting the updated theme.
To use the updated theme in a guide, open the guide and apply the theme. You can find more information in this article under Apply a theme to a guide.
Guide container styles
Under Guide Container, select Overlay guides or Embedded guides to open the styling options for that container type.
Use the tabs to switch between Light mode 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
- Size
- Caret width and height
- Drop shadow color, angle*, distance*, blur*, and size*
- Close button color, hover color, weight, size*, and position*
- Backdrop color
- Z-index
- Watermark image
*Must have Advanced Options turned on.
Tip: Turn on Advanced Options at the top of the right panel to show additional properties.
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.
At the bottom of the styles panel on the right is a Color Contrast Checker, which gives you a contrast ratio for the styling options you've chosen and comparative WCAG requirements for sufficient color contrast ratios.
Button styles
In the left panel, select a button element (Primary, Secondary, Tertiary) to open its settings in the right panel. For each button, you can define separate default and hover styles. 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
Hover styles
- Background color
- Border color
- Font weight and color
*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.
Horizontal line
Select the Horizontal line element to open the Horizontal Line Styles panel on the right side of the page. Use the panel to configure the following properties:
- Thickness
- Color
- Type (Web guides only): Solid, dotted, dashed, or double
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.
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, dark mode styles are applied automatically. You can preview both color modes directly in the theme editor and adjust each as needed.
Tip: If you're unsure of the correct CSS selector for dark mode, consult the OEM partner or application owner, or use your browser's developer tools if you have access. This ensures your guide displays correctly when visitors switch to dark mode.
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.
For mobile guides, dark mode is controlled by a visitor metadata property passed by your app at the start of a session. If your app passes a property such as dark_theme = true, you can reference that 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. Not styled by themes. You can customize these directly in the Visual Design Studio.
- Resource Center announcements. Requires opening the Resource Center in the Visual Design Studio and saving for dark mode changes to apply.
- Horizontal lines. Dark mode styles aren't 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
To apply a theme or typography and button styles to a guide, select the guide to open it 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
- From the left-side menu, go to Guides > Guides
- From the table, open the guide you want to apply a theme to.
- Select Edit in my app to open the Visual Design Studio.
- 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.
Tip: If you're unsure of the correct CSS selector for dark mode, consult the OEM partner or application owner, or use your browser's developer tools if you have access. This ensures your guide displays correctly when visitors switch to dark mode.
Duplicate a theme
Admins 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.
Enter a name for the new theme. The default name is Copy of [Original theme name].
Delete a theme
Admins 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.