How do I make my web popups and in-app messages support dark mode?

Both let you set a second color palette for users whose device is in dark mode.

Web popups:

In Colors, turn on Enable dark theme.
Use the sun/moon switch above the color fields to choose which palette you're editing.
Click Auto from light to generate the dark palette from your light colors, then fine-tune any field.

The visitor's browser picks the palette from their OS dark mode setting; there's no toggle on the popup itself. Turning Enable dark theme off and on again keeps your dark palette.

In-app templates (built-in editor):

Open the Settings tab and, in Color scheme, turn on Dark mode variant.
Set the colors for dark mode.
Use the sun/moon icon in the top bar to compare light and dark while you edit.

Things to know for in-apps:

Dark mode variant shows on iOS and web only. Android users always see the light colors.
Templates saved before this option existed only have light colors until you open and re-save them.
Images with a background color baked into the file don't switch; use a transparent image or a separate dark image.

Learn more: Dark mode for Web popups, Dark mode variant for in-app templates

Comments

Articles in this section