Dark mode support in emails

It can be difficult to ensure consistent email rendering in both light and dark modes across different email clients. Dark mode is now a default setting for many email clients (on both desktop and mobile devices) and it’s important to ensure your emails look good in both modes.

Email clients handle dark mode quite differently, making it challenging to maintain consistent branding and design. Some clients automatically invert colors, while others respect dark mode preferences through CSS media queries.

This guide explores the current state of dark mode support and provides practical solutions for maintaining brand consistency.

​

Best practices

Ultimately, after experimenting with a number of techniques, the following combination of techniques can enhance consistency across clients while respecting dark mode preferences:

1. Logo color: use either grey or a colorful brand color that works on both light/dark backgrounds
2. Image stroke: apply a stroke to the logo that matches the light-mode email background
3. Dark mode optimization: Progressively enhance clients that support prefers-color-scheme with a specific dark mode logo

​

Logo color

When designing logos for emails, try to use a color that works well in both light and dark modes. Consider using grey or brand colors that maintain visibility in dark mode.

Try to avoid dark or black logos that might disappear in dark mode. Make sure to test your emails in dark mode in different email clients to ensure the logo is visible.

Some email clients (like Gmail on Android 14) automatically invert small images under ~50px if they detect poor contrast in dark mode. This behavior varies across clients and versions, so it’s crucial to test your specific logo in different clients.

​

Image stroke

For logos that need to maintain their original colors, consider adding a stroke in the colour of your light mode background. This stays invisible in light mode, but becomes visible in dark mode and highlights the logo.

Using thicker strokes usually improves visibility when scaled down. And ideally the change is made to the image itself rather than using a CSS filter.

Limitations to this technique:

• May not meet your brand or design guidelines
• You may need to make kerning or spacing changes for optimal appearance
• Stroke thickness might be limited by your logo’s design
• Image scaling can affect stroke appearance and visibility

​

CSS

While support for the prefers-color-scheme media query is limited—with Gmail being the main barrier for mass adoption—you can still optimize for dark mode.

With this technique you can use different image assets for dark mode in supported clients and have more control over text colors.

Apple Mail has the best dark mode support so it makes sense to test there first. Just make sure to also view your emails in Gmail and Outlook to ensure the dark mode is working as expected.

Here’s a very basic example of how to use this technique:

<style>
body {
  color: #000;
  background-color: #fff;
}
.light-logo {
  display: block;
}
.dark-logo {
  display: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #000;
  }
  .light-logo {
    display: none;
  }
  .dark-logo {
    display: block;
  }
}
</style>

<img src="https://example.com/logo-light.png" alt="Logo" class="light-logo">
<img src="https://example.com/logo-dark.png" alt="Logo" class="dark-logo">

​

Read more