• Skip to main content
  • Skip to footer

Dyspatch

  • Products
      • Overview
      • No-code email builder
      • Email collaboration
      • AMP for Email
      • Template localization
      • Expert services
      • Overview

      By use case

      • Product reviews
      • Surveys
      • Add to cart
      • Calendar booking
      • Product carousel
      • Interactive polls
      • View all

      By vertical

      • SaaS
      • Ecommerce
      • Fintech
      • Travel
      • Healthcare
      • On-demand services
      Sendwithus Logo
      • Overview
      • Analytics
      • A/B testing
      • Triggered emails
  • Pricing
  • Case studies
  • Resources
    • Blog
    • Free templates
    • Product shorts
    • Webinars
    • White papers
    • Ebooks, guides, & reports
  • Company
    • About us
    • Careers
    • Contact us
  • Login
    • Dyspatch
    • Sendwithus
Get a demo

5 Unique Dark Mode Email Design Tips (With a 13-Minute Video Tutorial)

By Aileen O’Brien | April 18, 2022 | Categories: Email Marketing
⏱ 4 minute read

In a poll by Android Authority, 81.9% of respondents said they use dark mode on their phones, in apps, and wherever it’s available. I know I do! 

There are a lot more stats to back up the prevalence of dark mode, but the point is, it’s popular. It’s here to stay. And it should be a consideration when you’re designing your emails. 

Why? For starters, some email clients will automatically convert your whites to blacks when a recipient views your message in dark mode. Elements like images and CTA buttons can also get lost in a black background. This is bad news for accessibility.  

In other words, dark mode users may miss your carefully crafted CTAs and beautifully designed graphics altogether. Thankfully, by keeping dark mode in mind when designing your emails, you can avoid these pitfalls.  

Watch the video below for my top five dark mode email design tips: 

Dark mode email, demystified 

1. Make your logo stand out

We all have a logo or two in our emails, so how can we make sure they pop on a dark background? My tip is to try adding a border around the logo. Make it the same color as your light mode background and it feels like a surprise treat for your dark mode users.

Alternatively, here are some more options for cool dark mode logo alterations:

  • Add a bright outline to the logo text.
  • Add a light background shape behind the logo.
  • Add a light glow around the logo, like a reverse drop shadow.

2. Social icons — please don’t fade away (also stay above 100-pixel images)

A minimalist icon with a transparent background can fade into a dark background. So I suggest adding a light background or a lighter border to your icons to help them stand out against a dark background. 

When choosing your social icons, make sure to keep an eye on which parts are transparent. You can do this by testing your images on a dark background early in the design process.

And remember to keep your icons (actually, any images) above 100px — images under 100px can have their colors inverted in Gmail on Android!

CUTE

SPOOKY (still cute though?)

3. Off white, not pure white

Avoid using pure white with the hex code #FFFFFF, especially for text or background colors. 

I’ve found some email clients target this hex code directly, which can lead to all manner of strange results. Stick with #FEFFFF instead. It doesn’t make a difference to our eyes, but it will prevent email clients from messing with your whites and altering your designs! 

4. Transparent image backgrounds

You might not notice what’s going on in the background of an image. But once the background color changes, all your sharp edges or strange crops can be revealed.

Watch out for the opposite issue as well, where more than you had realized turns out to be transparent! Here’s an example of this concept with llamas, my personal favorite members of the camelid family. 

Light Mode 🙂 🙂 🙂

Light Mode Lamas

All these llamas look the same on a white background. Scroll down to see which ones are a bit too transparent, have a sloppy cropped background, or have a cute glow… 

Dark Mode 😬 😵 🙂

Dark Mode Lamas

Don’t be middle llama!

Try using a transparent background to keep the same aesthetic, or add a little spice for dark mode with a fancy glow.(I added this fancy glow using Canva!)

Once again: Test your images on a dark background early to avoid surprises and late-stage redesigns.

5. Roll with it

Managing dark mode is a matter of perspective and planning, rather than some quick tricks and tips. Embrace the fact that your email designs may change in dark mode, and you’ll have a much easier time of things. You might even enjoy delighting dark mode users along the way. 

As a dark mode user, I know I’m used to seeing strange and broken content in emails, so it doesn’t take much to pull away from the pack and stand out in the inbox. With a little forethought, you can ensure all your subscribers have a positive experience. 

Incorporate dark mode into your email design process by:

  1. Testing images on dark backgrounds.
  2. Fine-tuning potential color choices to find the ones that will invert or can be muted without breaking readability.
    – Bonus tip: Use a tool like Litmus (which is built right into Dyspatch!) or Email on Acid to test a couple of color variations in dark mode. I recommend testing Outlook’s dark mode and Gmail on the iPhone’s dark mode, as these clients can act up the most. 
  3. Focus on clean contrast and readability instead of RGB perfection.

Join the dark side of email design 

Test out dark mode in your email design phase, and then keep testing it along the way.  

You don’t have to wait to have a fully coded email. In fact, you’ll do less back-tracking if you consider dark mode from the get go. Try inverting your potential color selections, or drop an image asset onto a dark background. 

And don’t forget to avoid using pure white #FFFFFF!

Questions about any of these tips? Hit the chat button in the bottom right corner of your screen, or shoot me your Qs here.

Aileen O’Brien

Dog/plant mom who sees the beauty in email HTML. Loves tracking down email client quirks and turning people’s modular email system dreams into reality. Services Lead at Dyspatch.

  • LinkedIn

    Related Posts

  • 3 Key Opportunities to Improve Email Engagement
  • AMP for Email Series: Ecommerce Product Campaigns
  • GIFs vs Videos in Email: What’s Most Effective for Engagement?
Tags: Email Marketing Articles
Share this post:
  • Facebook
  • Pinterest
  • Twitter
  • Linkedin
LET’S CHAT!

Why wait? Take your email marketing to the next level today.

Get a demo

737 Fort Street,
Victoria, BC
V8W 1G9 Canada

548 Market Street,
San Francisco, California
94104 US

  • Phone 1-877-458-9231
  • Email us@dyspatch.io
  • Facebook
  • Twitter
  • Instagram
  • LinkedIn
  • YouTube

Get the latest email strategies, tips, and trends right to your inbox.

About Dyspatch

  • About us
  • Careers
  • Contact us
  • Pricing
  • Press & Media
  • Release Notes

Features

  • Dyspatch overview
  • No-code email builder
  • Email collaboration
  • Email template localization
  • AMP for Email
  • Sample AMP email templates
  • Expert Services
  • Sendwithus Overview
  • Agency Program

Email resources

  • Blog
  • Dyspatch product shorts
  • Webinars
  • White papers
  • Ebooks Guides & Reports
  • HTML email templates
  • Knowledge base
  • Email production glossary

Integrations

  • Integrations overview
  • Email builder for Braze
  • Email builder for Iterable
  • Email builder for Salesforce Marketing Cloud
  • Email builder for Pardot
  • Email builder for SendGrid
  • Email builder for Marketo
  • Email builder for HubSpot
  • Email builder for Oracle Eloqua

Dyspatch respectfully acknowledges the Lekwungen and W̱SÁNEĆ People, whose unceded territories we live and work on. We would also like to express our gratitude to all of the Coast Salish people as we continue to work and live as guests on their lands.

We recognize that acts of colonization created many inequities for First Nations, Inuit, and Métis people. As a company, we acknowledge that we have a responsibility to work towards reconciliation and to remain open to suggestions and consultations, especially with Indigenous communities.

Privacy policy    |    Terms of service    |    Web accessibility    |    Cookie policy    |    Usage    |    Sitemap

Copyright © 2023 Techdrop Labs Inc. All Rights Reserved.

Get a quote

Get a demo

Features & Functionality
StarterTeamsTeams+
Universal styling
Drag and drop email builder
Custom code editor
Custom fonts
Device specific elements
Version history
Social media link settings
Commenting
Live previews
Dark mode previews
Litmus testing
Custom merge fields
Image hosting
Brand & legal compliance guardrails
User role permissions
ESP logic
Code Export
AMP Email Support
Approval Workflows
API Access
User Management
Translation (via Smartling)