Optimizing Logos for Dark Mode Email Signatures

Overview

Dark Mode is now common across Outlook, Gmail, Apple Mail, and mobile email apps, but each client applies it differently, there is no setting that guarantees identical rendering everywhere. This article explains how Dark Mode affects logos in signatures and helps you choose between the two recommended logo treatments: a transparent background or a white background/border.

Why Dark Mode rendering varies

Email clients control how messages render, and each handles Dark Mode differently. Depending on the client, Dark Mode may apply no changes, partially adjust colors, or fully invert backgrounds and text. Some clients also override colors you set in the signature's HTML. The same signature can therefore look different across desktop, web, and mobile, and even across versions of the same client.

A few examples of how behavior differs:

• Classic Outlook for Windows fully inverts colors, including backgrounds you set explicitly

• Gmail on the web leaves email content largely unchanged, while the Gmail mobile apps invert colors

• Apple Mail is the most conservative, generally preserving your colors but inverting pure black and pure white

Because you can't control which client (or version) your recipients use, design signatures to stay legible even when colors are modified, rather than relying on fixed background colors.

Quick decision guide

• Choose a transparent logo if your logo uses bright or vibrant colors that contrast against both light and dark backgrounds

• Choose a white background or border if your logo is dark (black, navy, charcoal) or contains thin dark elements that would disappear against a dark interface

Comparison table

Option 1: Transparent logo

A PNG with a transparent background lets the logo sit directly on whatever background the email client renders - light or dark. This is the cleanest treatment when the logo itself has enough contrast to stay visible in both modes.

Pros:

• Clean appearance with no visible box or border in Light Mode

• Adapts naturally to whatever background the client renders

• Works across clients without mode-specific adjustments

Cons:

• Dark logo elements can disappear against dark backgrounds

• Requires the logo artwork itself to carry enough contrast

Best for: Blue, green, or multicolor logos with sufficient contrast to remain visible on both light and dark backgrounds.

Option 2: Logo with a white background or border

Instead of a transparent image, the logo file includes a white background or a subtle white border (stroke) around the artwork. In Light Mode, the white blends into the email and is nearly invisible. In Dark Mode, it stays visible behind the logo, keeping dark artwork legible against the dark interface.

There are two variants of this treatment:

• White border (stroke): a thin white outline around the logo elements. Invisible on white, frames the artwork on dark. This keeps the treatment subtle.

• White background: a solid white rectangle behind the logo. More visible in Dark Mode, but guarantees legibility for complex or text-heavy logos.

Pros:

• Keeps dark logos visible in Dark Mode

• Nearly invisible in Light Mode

• More consistent branding across clients, since the contrast is baked into the image itself

Cons:

• The white shape is visible in Dark Mode (by design)

• Requires editing the logo asset rather than using brand files as-is

Best for: Black, navy, or charcoal logos, and any logo with thin dark elements or dark text.

Why we don't recommend HTML background colors

It may seem simpler to place a transparent logo on a colored background using HTML or table styling instead of editing the image. In practice, this is unreliable. Dark Mode in many clients doesn't just ignore background colors, it actively inverts or overrides them. A white HTML background can be flipped to dark, light text can become unreadable, and brand colors can shift differently in each client. Gradients render poorly or not at all in several clients.

Because the client controls final rendering, an image asset that already contains the desired background produces far more predictable results than styling applied in HTML.

Testing your signature in Dark Mode

The signature editor includes a Dark Mode Preview (the moon icon), which simulates how email clients adjust your signature's colors in Dark Mode. Use it as your first check whenever you change a logo or signature colors. See How to use the signature editor for where to find it.

The preview is an approximation; clients apply Dark Mode differently, so it may not exactly match every client. For signatures where Dark Mode rendering matters, also send test emails to yourself and check them in Outlook desktop, Gmail on mobile, and Apple Mail with Dark Mode enabled.

Best practices

• Use PNG files for logos - PNG supports transparency

• Keep logo artwork simple, with sufficient contrast

• Avoid relying on HTML background colors for branding

• Use a white background or border for dark logos

• Check the Dark Mode Preview in the signature editor after any logo change

• Verify rendering in Outlook, Gmail, Apple Mail, and mobile clients whenever possible

Making your decision

Start from the logo itself: if it stays clearly visible when you place it on a dark background, use the transparent version. If any element fades or disappears, add a white border or background to the image file.

Consider these factors:

• Does the logo contain black, navy, or other dark elements?

• Does it include thin lines or small dark text that could vanish on dark backgrounds?

• How does it look in the Dark Mode Preview?

Related articles

• Fix for Black Background in Transparent Images

• How to Upload Images to Opensense

• Images Help Guide

• How to use the signature editor