Email Signatures in Dark Mode — How to Make Them Work (2026)

What dark mode actually does to email signatures

Dark mode doesn’t work the same way across every email client — and that’s the root of the problem. There are roughly three different approaches email clients take when dark mode is on:

Because there’s no single standard, the goal of dark-mode-friendly email signatures is to write HTML that holds up reasonably well across all three approaches. That means using explicit colour declarations, avoiding transparent backgrounds, and building in fallbacks. The rest of this guide covers exactly how to do that.

The transparent PNG problem (the most common issue)

This is the issue I see most often when someone reports their signature “breaking” in dark mode. Here’s exactly what happens:

The transparent PNG issue affects two types of logos:

• Dark logo on a transparent background: Works in light mode (white fills the transparent area), breaks in dark mode (dark fills the transparent area and the dark logo is invisible).
• White logo on a transparent background:The classic “dark mode only” logo. Invisible in light mode, visible in dark mode. Often used for website dark mode, but doesn’t work in email.

The fixes

Of these three, the first — exporting with a solid background — is the one I’d recommend to almost everyone. It’s the most reliable and requires no HTML changes. The email signature with logo guide covers image export settings in more detail, including file size optimisation.

Text colour issues in dark mode

After transparent PNG issues, text colour problems are the second most common complaint. The pattern is: signature looks fine in light mode, text becomes invisible or very low contrast in dark mode.

Why pure black (#000000) is a problem

This feels counterintuitive — surely the darkest text is the most readable? But pure black (#000000) is detected as a “dark colour” by some email clients’ dark mode algorithms, which then skip inverting it. On a dark background, pure black text becomes nearly invisible.

Dark grey (#333333 or #1a1a1a) sits in a different zone — it’s detected as “very dark but not pure black” and gets handled differently. In practice, it looks identical to black in light mode and behaves better in dark mode. I’d recommend #333333 as your standard body text colour for email signatures.

Brand colours in dark mode

Brand colours used for your name, a divider line, or highlighted text generally survive dark mode better than body text, because they’re recognisably non-black and most clients preserve them. However, very light brand colours — pastels, light yellows, light blues — can become invisible on dark backgrounds if the email client doesn’t invert them.

Test any brand colour you use against a dark background — simply check whether it’s readable on #1a1a1a or #121212. If it isn’t, darken the shade slightly or reserve that colour for decorative elements rather than text. For more on colour choices, the email signature design guide covers contrast ratios and accessibility in detail.

Gmail dark mode behaviour

Gmail’s dark mode implementation is the most complex of the major clients, and it behaves differently depending on whether you’re using Gmail web (browser) or the Gmail mobile app.

Gmail web (browser) — dark mode

Gmail web respects inline styles reasonably well. If you declare background-color: #ffffff on your signature’s outermost element as an inline style, Gmail web will mostly leave it alone — it won’t force a dark background over your explicitly white one. Text colours declared inline are also generally preserved.

The catch: if any part of your signature doesn’t have explicit colour declarations — text that inherits colour from the browser default, or table cells without a background-color — Gmail web may apply its dark mode logic there. The fix is explicit inline styles on everything that matters.

Gmail on Android — dark mode

Gmail on Android is more aggressive. It applies what Google calls “smart inversion” — it analyses the email’s colour palette and tries to apply dark mode without making things unreadable. In practice, this can:

• Change your white signature background to a dark grey or near-black
• Invert light-coloured text to dark, and vice versa
• Leave some explicitly-coloured elements unchanged while modifying others
• Make transparent PNGs pick up the dark background

The most effective protection against Gmail Android’s smart inversion is to use background-color: #ffffff on your outer table, declare all text colours explicitly as inline styles, and avoid transparent PNG backgrounds. There’s no perfect solution — Gmail Android’s dark mode is genuinely unpredictable — but these steps reduce the failure rate substantially.

If you’re seeing Gmail-specific issues in your signature, the Gmail signature guide covers the full range of Gmail-specific quirks and fixes.

Outlook dark mode behaviour

Outlook has multiple versions with different dark mode behaviour, which makes it the most complicated to target.

For a full breakdown of Outlook-specific signature behaviour beyond dark mode, the Outlook signature guide covers rendering quirks, DPI scaling, and image handling in detail.

Apple Mail dark mode behaviour

Apple Mail on both macOS and iOS has relatively well-behaved dark mode support — it applies dark mode to its own interface but generally preserves email content as-is when inline styles are present.

Where Apple Mail does apply dark mode to email content, it uses the @media (prefers-color-scheme: dark) CSS media query — which means it respects CSS targeting. You can write dark-mode-specific CSS rules that Apple Mail will apply when dark mode is active. Most other email clients ignore these rules, but you can use them as a progressive enhancement for Apple Mail users.

<style>
  /* Only Apple Mail and a few others will apply this */
  @media (prefers-color-scheme: dark) {
    .signature-wrapper {
      background-color: #1a1a1a !important;
    }
    .signature-text {
      color: #e0e0e0 !important;
    }
    .signature-name {
      color: #ffffff !important;
    }
  }
</style>

This works for Apple Mail but is ignored by Gmail, Outlook, and most other clients. That’s fine — it’s a progressive enhancement, not a requirement. Your signature still needs to work in light mode (and look acceptable in other clients’ dark modes) even without this media query.

Apple Mail’s transparent PNG issue mirrors what we covered earlier — the same fix applies. A PNG with a solid background behind the logo will avoid the transparent background problem in Apple Mail’s dark mode just as in any other.

Logo solutions for dark mode

The logo is the element most likely to break visibly in dark mode, so it deserves its own section with specific recommendations.

Option 1 — Solid background PNG (recommended)

Export your logo as a PNG with a solid white (or very light grey) background. No transparency. This is the most universally compatible approach because it removes the dark-mode variable entirely — the email client can’t change what’s inside the image. The trade-off is that the logo always has a white background, which is fine in nearly all professional contexts.

Option 2 — Wrap in a white background table cell

If you want to keep your transparent PNG (perhaps because your logo is used in multiple places and changing the export is impractical), wrap the <img> in a table cell with a forced white background:

<td style="background-color:#ffffff; padding:4px;">
  <img src="logo.png"
       width="180"
       height="48"
       alt="Company Name"
       style="display:block;width:180px;height:48px;" />
</td>

The background-color:#ffffff on the <td> creates a white box behind the transparent PNG. Most clients preserve explicit inline background-color declarations, so your logo gets a white backing in both light and dark mode.

Option 3 — A dedicated light logo version

Some brands have a version of their logo designed for dark backgrounds — a light or white version of the mark. You can use CSS media queries in Apple Mail (and a few other supporting clients) to swap between logo versions:

<!-- Light-mode logo (default, shown in all clients) -->
<img class="logo-light"
     src="logo-dark.png"
     width="180" height="48"
     alt="Company Name"
     style="display:block;" />

<!-- Dark-mode logo (only shown in Apple Mail with dark mode) -->
<img class="logo-dark"
     src="logo-light.png"
     width="180" height="48"
     alt="Company Name"
     style="display:none;" />

<style>
  @media (prefers-color-scheme: dark) {
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
  }
</style>

This works in Apple Mail. Gmail, Outlook, and most other clients will ignore the media query and show both images (or only the first if they handle display correctly). It’s worth testing before relying on it. For a full overview of logo handling in email signatures, see the signature with logo guide and the HTML email signature guide.

HTML and CSS fixes for dark mode — the complete checklist

Here’s a consolidation of every HTML-level fix that makes a meaningful difference to dark mode compatibility. If you’re building or reviewing signature code, run through this list.

NeatStamp generates code with all of these considerations baked in. If you build your signature in the editor, you get dark-mode-aware HTML without needing to write any of this manually. If you’re editing existing HTML, this checklist covers the changes that matter most. The HTML email signature guide goes deeper on the full code structure.

How to test your signature in dark mode

Dark mode testing has to be done in real clients — there’s no reliable way to predict how each client will handle your code without actually sending the email and viewing it. Here’s a practical testing workflow.

Minimum viable testing (free)

Send a test email to yourself and view it on these three clients with dark mode enabled:

Extended testing (for company-wide deployment)

If you’re deploying a signature across a whole company or need to test across more clients, tools like Litmus and Email on Acid render emails across 90+ client/OS combinations and show screenshots. At around $100/month for occasional use, this is worth it for company-wide deployments but overkill for individual signatures.

One final note: if you discover that your existing signature has dark mode issues, the guide to images not displaying in email signatures covers a broader set of image rendering problems (not just dark mode) that might explain other issues you find during testing.

Frequently asked questions