This article is also available in:

Customize the Dark Mode of an Engage Element

The dark theme automatically adapts the appearance of your Engage elements when a visitor is using a dark theme on their device or browser.
All customizations made for the dark theme are completely independent from the light theme. In other words, any changes you make to the dark theme will not affect the appearance of the light theme.

By default, the dark theme inherits all styling from the light theme. Only the properties you explicitly customize for the dark theme will override the corresponding light theme values.

This feature is currently available only in Engage and will be available in Access soon.

Force the display theme of an Engage element

By default, the Engage element automatically uses the theme detected from the visitor's browser (prefers-color-scheme).

If needed, you can force a specific theme by configuring the theme parameter:

light: forces the element to be displayed in light theme.
dark: forces the element to be displayed in dark theme.
auto: automatically follows the browser preference (default value).

This configuration is optional. You do not need to set it if you want to keep the automatic behavior.

For more information about theme configuration, please refer to our dedicated documentation:
Configure the theme of an Engage element

Example:

engage.config('theme', 'light');

Method 1: Customize Block Styles

To customize the appearance of an element directly from the editor:

Open the block you want to customize.
Go to the Styles tab.
Open the Dark mode tab.
Customize the desired properties, such as the background color, text color, CTA button, borders, and more.

These changes will only be applied when the element is displayed in dark theme.

Method 2: Advanced Customization with CSS

For more advanced styling, you can use CSS dedicated to the dark theme.

Open the Element settings.
Click on the Dark mode toggle.
Add your CSS rules inside the .dark selector:

.dark {
  /* Your styles */
}

Any styles defined within the .dark selector will only be applied when the dark theme is active.
This approach is particularly useful for advanced customizations that are not available through the built-in styling options.

Using Templates

If you create an element from a template available in the platform, the main styling options (colors, backgrounds, buttons, text, and more) are already exposed through the configuration fields in the left-hand panel.
Simply adjust the values for the dark theme to quickly customize the template without writing any CSS.

As with the other methods, these changes only affect the dark theme and do not modify the appearance of the light theme.

Updated on: 21/07/2026

Was this article helpful?

Thank you!