Dark Mode Editing

Editing Dark Mode for Apple and iOS

Felix Higgs avatar
Written by Felix Higgs
Updated this week

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):

Email client

Supports dark mode editing

Apple Mail (iPhone & iPad)

Yes

Apple Mail (Mac)

Yes

Outlook (Mac)

Yes, in some versions. (Support can vary between installations. Still darkens elements that are considered too bright, click here to learn more)

Outlook (Windows)

No

Outlook App (Android)

No

Outlook App (iOS)

No

No

Gmail App (iOS)

No

Gmail App (Android)

No

Yahoo App (iOS)

No

Yahoo App (Android)

No

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 colour 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.

Modules and Dark Mode Editing

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.

Background Colours and Dark Mode Editing

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

How dark mode editing works with your marketing automation instances and sending platforms

See our help docs for more information:

For email clients that don't support dark mode editing

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:

Did this answer your question?