Skip to main content

Dark Mode Editing

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

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 emails and landing pages. This feature is optional. It does not affect delivery or core functionality.

Supported browsers and email clients display your custom styles when dark mode is enabled on a recipient’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

Most modern web browsers support dark mode media queries. Some email clients do not.

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

Enable Dark Mode Editing in your asset settings before customizing styles.

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

  2. Click Settings.

  3. Turn on Enable Dark Mode Editing.

    Settings panel with Dark Mode Editing toggle highlighted.

  4. Look for the dark mode icon beside supported style attributes.

Customize Light and Dark Mode Styles

After enabling Dark Mode Editing, you can configure separate styles for light mode and dark mode.

Edit Dark Mode Styles

  1. Click the dark mode icon beside a supported style attribute.

    Attribute panel showing dark mode toggle icon.

  2. Configure separate values for:

    • Light Mode

    • Dark Mode

  3. Repeat for each element that requires custom styling.

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

What You Can Customize

You can configure dark mode styles for:

  • Background colors

  • Text colors

  • Button colors

  • Link colors

Best Practices

  • Use high contrast between text and background

  • Avoid relying on borders for key visual separation

  • Test your email in multiple email clients

  • Use preview tools to check dark mode behavior

  • Avoid live text over background images

    • Some email clients invert text colors in dark mode while leaving background images unchanged. Use flattened images with embedded text when possible.

Preview Dark Mode

Preview dark mode directly inside the builder.

  1. Click Preview.

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

  3. Switch between Light Mode 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 Light Mode and Dark Mode styles directly on the canvas.

  • Switch between Light Mode and Dark Mode while editing

  • View changes instantly on the canvas

  • Design dark mode styles without opening Preview

Step 1. Enable Live Dark Mode Editing

  1. Open Settings.

  2. Enable Dark Mode Editing.

    Settings panel with Dark Mode Editing toggle highlighted.

Switch Between Views

  1. Open your email.

  2. Click the Sun icon for Light Mode.

  3. Click the Moon icon for Dark Mode.

    Canvas showing Light Mode and Dark Mode toggle options.

This works similarly to switching between Desktop and Mobile editing views.

Step 3: Customize Dark Mode Styles

  1. Switch to Dark Mode.

  2. Select an element such as a button.

  3. Update style values:

    • Background color

    • Text color

  4. View changes live 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 the Email Testing feature for the most accurate rendering results.

Email Testing shows how your email appears 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

Use separate images for light mode and dark mode.

Enable Dark Mode Images

  1. Turn on Dark Mode Editing.

  2. Select an image in the builder.

  3. Open the Image Attributes panel.

  4. Upload a separate dark mode image.

    Image attributes panel showing light and dark image options.

Image Size Requirements

Your light mode and dark mode images must use identical dimensions.

Use one-to-one image replacements for consistent rendering.

Modules and Dark Mode

Modules can include predefined dark mode styles.

  • Dark mode styles inside modules only apply when Dark Mode Editing is enabled at the asset level

  • If Dark Mode Editing is disabled, only light mode styles appear

  • Modules remain usable in assets that do not use dark mode

Avoid Layering Multiple Background Colors

Dark mode rendering varies across email clients.

Some clients may:

  • Invert only certain layers

  • Ignore nested background colors

  • Automatically darken bright sections

  • Create visible dividing lines between sections

This can reduce readability and create inconsistent layouts.

Best Practice

Keep your background structure simple.

Use:

  • One background color for Light Mode

  • One background color for Dark Mode

  • Background colors at the main content level only

Avoid adding background colors to:

  • Columns

  • Content blocks

  • Nested containers

If Multiple Backgrounds Are Required

  • Configure dark mode colors for every layer

  • Maintain strong text contrast

  • Test using Email Testing

  • Preview in both Light Mode and Dark Mode

Additional Resources

Use these related articles for unsupported email clients and advanced dark mode design guidance:

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 Borders on Buttons in Dark Mode
Getting Your Images Ready for Dark Mode
Dark Mode Editing for Outlook for Mac
Did this answer your question?