Apply themes to your email content apply-email-themes

To get started, create a new content template.

Select the Create or edit themes option.

Select an Adobe theme. In this example, select the Default theme and click Create.

You can also select a custom template from the My themes tab and click Edit to update it.

In the General settings tab, start defining your theme by giving it a specific name suiting your brand. You can adjust the default viewport width for your emails and also export the current theme to share it across sandboxes.

Use the rail on the right to navigate through the different tabs and update your design settings.

From the Colors tab:

• Use the Edit button to set up a Color palette with default colors for your brand. Select a Preset to quickly create a color scheme, or adjust each color of your theme individually. You can also use a combination of both.

  

• Click Add variant to create multiple color variants for your theme, each with its own color palette and nuance controls.

  

• For each variant, click the Edit icon to edit any individual element. You can use the default palette that you have created, or any custom colors.

  

Optionally, turn on the Enable dark mode option to make the dark mode view available for all the theme’s color variants, through the toggle on the top right of the central canvas. Learn more on dark mode

Use that toggle to switch to dark mode view. The color palette automatically changes to a default dark version for each variant.

You can further customize each dark mode variant, using either a different color palette or custom colors.

Dark mode color variants are independent from light mode colors, so color edits in dark mode preview apply only to the dark mode version. However, non-color settings (such as spacing, padding, font size, etc.) are shared with light mode and are also applied there.

In the Text settings, you can set the global font that you want to use for your entire theme. For more granular control, you can also edit each heading and paragraph type to adjust the font, size, style, and so on.

In the Spacing tab, select an individual element from the list to properly space it between the different components.

Using the other tabs on the right, you can manage separately each button element, divider, additional image formatting, and grid layout spacing for this theme.

Click Save to store this theme for future use. It is now displayed in the My themes tab.

In Journey Optimizer, add an email action to a journey or campaign, or create an email content template, and edit the email body.

You can either select one of the following actions:

• Select a built-in email template to open the Email Designer. A default theme specific to each template is automatically applied.

• Design a new content from scratch and select Use Themes to start with a predefined styling theme.

  

  note caution
  CAUTION
  If you choose the Manual Styling mode, you won’t be able to apply any themes unless you reset your design.
  To leverage a fragment in a themed content, this fragment must have been created itself using themes. Learn more

Once in the Email Designer, click the Themes button on the right rail. The default theme or the template’s theme is displayed. You can switch between the two color variants for this theme.

Click the arrow next to the theme currently used. The list of available custom and Adobe themes displays.

Click My themes and select a theme that you created.

Click outside of the drop-down list. The newly selected custom theme automatically applies its styles to all email components. You can toggle between the color variants if any.

Switch the toggle to Dark mode for the selected theme. The dark mode version of that theme is applied to the email content. Update it as needed - any subsequent color edits and previews reflect the dark mode styling.

{width="45%"} {width="45%"}

The dark mode version is used when the message is displayed in supported dark mode email clients. Learn more about dark mode

When a theme is selected in a content template, you can click the Edit theme button to update it. Learn more

{width="40%"}

If you leverage a theme using several color variants, you can choose a specific variant for a given structure component. This allows you to define a color variant for the whole content, and use a different variant for just one specific structure.

To do this, select a structure component, click the Use specific theme’s variant option from the Styles tab on the right, and apply the desired variant to that structure.

In this example, the first color variant of the current theme is applied to the whole email content, but the third color variant is applied to the selected structure. You can see that the body and viewport background colors for that specific structure are different from the rest of the content.

In Journey Optimizer, create a visual fragment and click Create to design the content of your fragment. Learn how

Select Use Themes to start with a predefined styling theme.

{width="100%"}

Once in the Email Designer, you can start building your fragment.

Click the Themes button on the right rail. The default theme is displayed. You can switch between the different color variants for this theme.

{align="center" width="100%" modal="regular"}

You can select other themes to preview your fragment content. To do so, select the arrow next to the default theme and click Select themes.

{width="40%"}

You can navigate between the Adobe themes and My themes tabs, and select up to five compatible themes (from both tabs) for your fragment.

{width="70%"}

Click Close.

Select again the arrow next to the Default theme. You can now toggle between the different themes you just selected to preview each style rendering.

{width="90%"}

Click Select themes again to add more themes or change your selection.

Open an email content template and edit its content using the Email Designer.

Select the Themes icon on the right rail and click the Generate theme from content button.

{width="100%"}

The Create a theme window opens. Journey Optimizer automatically detects the styling elements and consolidates them into a new theme.

{width="90%"}

Provide a name for your theme.

Make your own adjustments as needed, just like you do when creating a theme from scratch, such as adding a color variant, editing fonts, etc. Learn how

{width="90%"}

Click Save to store this new theme for reuse. You can now apply this theme to your contents such as any other theme. Learn how