{"id":242733,"date":"2026-04-08T14:27:44","date_gmt":"2026-04-08T12:27:44","guid":{"rendered":"https:\/\/spotler.com\/?post_type=blog&p=242733"},"modified":"2026-04-08T15:39:54","modified_gmt":"2026-04-08T13:39:54","slug":"how-to-build-emails-that-work-in-dark-mode","status":"publish","type":"blog","link":"https:\/\/spotler.com\/en-gb\/blog\/how-to-build-emails-that-work-in-dark-mode","title":{"rendered":"How to build emails that work in dark mode"},"content":{"rendered":"

Dark mode isn’t a feature you can opt into or ignore. For a growing number of users, it\u2019s how they prefer to read email. And I\u2019m one of them. As soon as Windows and Apple provided dark mode OS I jumped over to the dark side.<\/strong><\/p>\n

And since 2019, more and more users have switched to dark mode across devices, especially on mobile.<\/p>\n

In many cases, email clients are applying it whether you design for it or not. That creates quite the challenge!<\/p>\n

So, you’re no longer designing a single experience. You’re designing something that might be inverted, adjusted, or overridden entirely, depending on where it’s opened.<\/p>\n

The same email can look polished in one inbox and completely unreadable in another.<\/p>\n

This guide focuses on the practical side of what breaks and how to build emails that still look intentional when dark mode gets involved.<\/p>\n

What dark mode does to your emails<\/h2>\n

Before fixing anything, it helps to understand what you’re dealing with. Email clients generally handle dark mode in three ways:<\/p>\n

    \n
  1. No change:<\/strong> Your design is left alone<\/li>\n
  2. Partial inversion: <\/strong>Some colours are adjusted to fit a darker UI<\/li>\n
  3. Full inversion: <\/strong>Light backgrounds become dark, dark text becomes light<\/li>\n<\/ol>\n

    The problem is inconsistency. There’s no single standard.<\/p>\n

    So instead of asking “Does my email support dark mode?”<\/em>, the better question is: “What happens to my email when I lose control of the colours?”<\/em><\/p>\n

    The biggest dark mode problem areas<\/h2>\n

    Certain elements break more often than others. These are the ones worth paying attention to.<\/p>\n

    Logos (the usual failure point)<\/h3>\n

    Logos are often the first thing to go wrong.<\/p>\n

    If you’re using a dark logo on a transparent background, it can disappear completely in dark mode.<\/p>\n

    If you’re using a light logo, it might end up glowing or clashing depending on how the background is handled.<\/p>\n

    How we handled it at Spotler<\/h3>\n

    At Spotler, we solved this by adding a chunky solid white stroke around the logo and filled in the P, O and E counters with white.<\/p>\n

    It’s simple, but it works effectively.<\/p>\n