Work with dark mode

Learn how dark mode works and what you should consider when designing your campaign.

Overview

Dark mode is a user-selected display option that’s available on Android, iOS, and Outlook 365 online. If dark mode is enabled, it checks any font, background and button colours, and if a colour is defined, it targets the color-related HTML attributes and CSS properties. Dark mode then adjusts the styles to be lighter or darker. For example, if your text is a dark colour, dark mode changes it to a lighter one.

If a contact has dark mode enabled, it changes the colours in your email campaign by default. Below, you can find ways to make your campaign dark mode friendly.

Comparing dark and light mode

Important

Dark mode doesn’t have universal standards, meaning that different devices and apps show designs differently when they're in dark mode.

Viewing in Outlook 2016's desktop app

Here’s two campaigns in Outlook 2016 desktop app (light mode standard):

dm1.png

Here’s the same two campaigns in the Outlook 365 desktop app (dark mode):

dm2.png

Note the differences in each campaign, such as:

  • The lighter and white colours changed to a darker shade.
  • The darker text colours changed to a lighter shade.

Viewing in Android's Gmail app

Check out this example. This time it's in an Android Gmail app in dark mode:

dm3.png

Noticeable changes for Android:

  • Any darker grey backgrounds changed to black.

Adapting your campaign

To make sure your campaign appears as you expect in both dark and light modes, here’s a list of proactive steps you can take:

  • Use darker background colours
    Campaigns created with dark mode in mind are less likely to be impacted by dark mode rendering. Look at the white on black section in the screenshots above, which remains unchanged.
  • Use image transparency
    A transparent image allows the background colour change to be seamless with design still intact.
  • Use a white stroke on your black font for images or icons
    The colour black disappears on a black background, you can put a white stroke on your dark text or icons to improve readability when the background colours change.
  • Avoid mixing images with background colours
    You can set the background colour of an image, so it matches the background of the block it sits in. This makes for a seamless aesthetic, but when dark mode changes the background colour of the block, it won’t be seamless anymore.
  • Test your design in both light and dark appearances
    See how your campaign looks in both appearances and adjust your designs as needed.

See also

Did you find this article helpful?

Can we help?

Thanks for using Engagement Cloud. If you need more help or support, then contact our support team.