This article will explain how to use dark mode editing. For a more general overview of dark mode, see our help doc: Dark mode.

Dark mode editing in Knak is a new set of features that allow you to set your own fully customised dark mode styles for your emails or landing pages.

Browsers and email clients that support dark mode CSS media queries will display your custom styles when dark mode is active on the user’s device or operating system.

All common web browsers support dark mode media queries. Not all email clients support them, but major email clients that do include Apple Mail, the Mail app on iPhone and iPad, and Microsoft Outlook for Mac.

Below is a table of all the major email clients that support dark mode editing (i.e., those that support dark mode CSS media queries):

Dark mode editing needs to be turned on by checking the box under ‘Settings’ in your email or landing page.

Once it has been turned on, you will see a dark mode icon next to any attributes that you can customise for dark mode.

Click the icon to configure your separate light and dark mode settings.

When you are viewing a Preview of your email or landing page, you can click the toggle in the top-right corner to see how your design will look in dark mode. For emails, this is an approximation, so a warning appears to remind you that dark mode rendering varies across email clients that support dark mode editing.

The best way to see an accurate representation of how your email will really look is to use Email Testing.

Note that when you enable dark mode editing for an email, we include some code that tells supported email clients to expect custom dark mode settings. In this state, some supported email clients may try to help make things darker by adjusting to elements that you have not yet customised, for example by turning a white background (for light mode) into a transparent background (in dark mode).

This is easily resolved by ensuring that you set custom dark mode settings for each of your elements in the Knak builder. We will also show a warning in the Optimize tab if dark mode editing is turned on but you haven’t set a dark mode color for any of your elements. Landing Pages are unaffected by this issue.

Additionally, when you set a dark mode image, it is going to have the exact same dimensions as the light mode image, so ensure that your images are set up at the right size to swap out 1-for-1.

If you use a module which contains dark mode customizations, these customizations will only be included in your final email or landing page if dark mode editing has been turned on under ‘Settings’.

You can still use a module that contains dark mode customizations in an asset that's not ready for dark mode. With dark mode editing turned off, only the light mode styles for your module will be included.

The Dark Mode editing allows you to set a specific background content color for Dark Mode. We recommend only setting two background colors: the light mode background content color and the dark mode background content color. Avoid layering multiple background colors to improve the rendering of the email. If an inner color or column background color is added to an email, it may affect the rendering of the email in some platforms.

After you have enabled dark mode editing under the settings tab in the builder, you should see the option to add different images based on if the customer is viewing your asset in light mode or dark mode! You can find this option in the image attributes section as shown below:

See our help docs for more information:

Editing dark mode images in emails in Marketo

Editing dark mode images in landing pages in Marketo

Editing dark mode images in emails in Pardot

Editing dark mode images in emails in Salesforce Marketing Cloud

Not every email client supports dark mode customizations, so here are some more help docs that will assist you in the creation of dark mode friendly emails for those that don’t:

Color Choices for Dark Mode

Borders and Dark Mode

Getting your Images Ready for Dark Mode

Using Text over Background Images

Using Borders on Buttons in Dark Mode

Color Contrast for Dark Mode