Design Guide

Email Signatures for Dark Mode

Over 80% of users now have dark mode enabled. Here's how to make your email signature look perfect in both light and dark mode.

The Dark Mode Problem

When email clients switch to dark mode, they invert colours. This causes several issues with email signatures:

🖼️ Invisible Logos

Dark logos on transparent backgrounds become invisible on dark backgrounds. Your brand identity disappears.

🔤 Unreadable Text

Dark text on inverted backgrounds can become unreadable. Some clients invert text colours, others don't.

🎨 Colour Shifts

Brand colours get altered. A signature that looks great in light mode may look completely wrong in dark mode.

How Email Clients Handle Dark Mode

  • Gmail: Does not invert colours — your signature looks the same (white background stays white)
  • Outlook Desktop: Fully inverts colours — background goes dark, text goes light
  • Outlook Web: Partially inverts — some elements change, others don't
  • Apple Mail: Inverts background and text colours
  • Apple Mail iOS: Inverts backgrounds but preserves inline background colours

Dark Mode Design Best Practices

  1. Add padding to logos: Export logos with a few pixels of white/light padding. This creates a visible border in dark mode.
  2. Use PNG with background: Instead of transparent PNG logos, add a subtle background to your logo image.
  3. Avoid pure black (#000): Some clients won't invert #000000. Use #111111 or #1a1a1a instead.
  4. Add explicit background colours: Set background-color on table cells rather than relying on white default.
  5. Test both modes: Always preview your signature in both light and dark mode before deploying.
  6. Use medium-contrast colours: Avoid very light greys or very dark greys — they may become invisible.

🌙 Dark mode tested: All our templates are tested in dark mode across major email clients. Browse dark-mode-ready templates →

Dark Mode Ready Signatures

Templates that look perfect in both light and dark mode.

Create Signature →