Skip to main content

Dark Mode Editing

Customize how your emails and landing pages appear in dark mode on supported devices.

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.

Overview

Dark mode editing lets you create custom dark mode styles for your emails or landing pages. This feature is optional. It does not affect email delivery or basic functionality.

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

⚠️ Important: 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 customized, for example by turning a white background (for light mode) into a transparent background (in dark mode). Landing Pages are unaffected by this issue.

Supported Email Clients

All major web browsers support dark mode media queries. Not all email clients support them. Below is a list of major email clients that support and do not support dark mode editing:

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

http://Outlook.com (Browser)

No

Gmail App (iOS)

No

Gmail App (Android)

No

Yahoo App (iOS)

No

Yahoo App (Android)

No

Turn On Dark Mode Editing

Dark mode editing must be enabled in your asset settings.

  1. Open your email or landing page in the builder.

  2. Click Settings.

  3. Toggle the Enable dark mode editing feature.

    Settings panel with Dark Mode Editing toggle highlighted.

  4. Once enabled, a dark mode icon appears next to customizable attributes.

Customize Light and Dark Mode Styles

After enabling dark mode editing, you can configure separate styles.

Edit Dark Mode Styles

  1. Click the dark mode icon next to a style attribute.

    Attribute panel showing dark mode toggle icon.

  2. Set your Light Mode and Dark Mode styles

    Separate Light mode and Dark mode values added in the Attributes panel.

  3. Repeat this for each element that needs custom dark mode styling.

Preview Dark Mode

You can preview your design in dark mode directly in the builder.

Preview Steps

  1. Click Preview.

  2. Use the toggle in the top-right corner.

  3. Switch between light and dark mode views.

Preview screen with dark mode toggle visible.

For emails, this preview is an approximation since not all email clients support Dark Mode Editing. Rendering may vary between email clients.

Live Dark Mode Editing

Preview and edit your emails in Light Mode and Dark Mode at the same time. See changes live on the canvas as you build.

Note: This feature is currently in Alpha testing. Please reach out to tiffany@knak.com if you would like to participate.

What’s New

You can now:

  • Toggle between Light Mode and Dark Mode directly on the canvas

  • See changes update live while editing

  • Design Dark Mode styles without opening Preview

Enable Dark Mode Editing

Dark Mode editing must be enabled in your settings.

Step 1: Turn On Dark Mode Editing

  1. Go to Settings

  2. Enable Dark Mode Editing

    Settings panel with Dark Mode Editing toggle highlighted.

Step 2. Switch Between Light And Dark Mode

Once enabled, you can switch views directly inside the editor.

  1. Open your email

  2. Select Sun Icon to view the asset in Light Mode or the Moon Icon to view the asset in Dark Mode view on the canvas.

Canvas showing Light Mode and Dark Mode toggle options.

This works similar to switching between Desktop and Mobile views. Learn more about Mobile View Editing.

Step 3. Customize Dark Mode Settings

  1. Switch to Dark Mode

  2. Select an element (example: button)

  3. Update color values such as:

    • Background color

    • Text color

  4. View changes instantly on the canvas

Note: If you have not set Dark Mode values, your email will look the same in both views.

Light Mode Editing View

Dark Mode Editing View

Light Mode Editing View
Dark Mode Editing View.

Test Your Email

Use our Email Testing Feature for the most accurate results. This shows how your email renders in real email clients.

Email Testing Feature displaying different email client renderings of dark mode settings.

Reminder: Once dark mode editing is enabled, set Dark Mode Styles for all elements. When you enable dark mode editing, special code is added to your email. This tells supported email clients to expect custom dark mode styles.

Images in Dark Mode

You can set different images for light and dark mode.

Enable Dark Mode Images

  1. Turn on Dark Mode Editing under Settings.

  2. Select an image in the builder.

  3. Go to the Image Attributes panel.

  4. Upload a separate image for dark mode.

Image attributes panel showing light and dark image options.

Image Size Requirements

Your dark mode image must have the exact same dimensions as the light mode image. Design images to swap one-for-one.

Modules and Dark Mode

Modules may include dark mode customizations:

  • Dark mode styles pre-added into modules are only included if dark mode editing is enabled at the asset settings level.

  • If dark mode editing is off, only light mode styles are used.

  • You can still use the module in assets that do not use dark mode.

Avoid Layering Multiple Background Colors

Dark mode is not handled the same way across all email clients. Some clients:

  • Invert only certain background layers

  • Ignore inner column background colors

  • Automatically darken bright sections

  • Create visible lines between sections

This can reduce readability and make your layout look uneven.

Best Practice

Keep your background structure simple.

  • Use one background color for light mode

  • Use one background color for dark mode

  • Apply the color at the main content level

Avoid adding background colors to:

  • Columns

  • Content blocks

  • Nested containers

If Multiple Backgrounds Are Required

  • Set dark mode colors for every background layer

  • Maintain strong text contrast

  • Test using Email Testing

  • Preview in both light and dark mode

A simple background setup improves consistency across Apple Mail, iPhone Mail, and Outlook for Mac.

Additional Resources

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

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

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:

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

Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com

Related Articles
Dark Mode
Color Choices for Dark Mode
Using Text Over Background Images in Dark Mode
Getting Your Images Ready for Dark Mode
Dark mode editing and Outlook for Mac
Did this answer your question?