Guide to dark mode
In recent years, more and more people have switched to dark mode. Dark mode is a great option for reducing eye strain or improving readability in low-light environments. Some recipients use it also for aesthetic reasons. The rise of dark mode also means a challenge for email senders, as it can significantly impact how your emails display for recipients who view them in dark mode. It's crucial to consider how the dark mode can affect your design to make sure your emails are readable and accessible for all recipients.
What is dark mode?
Dark mode is a display setting that replaces or inverts the light colour scheme to a dark one. Users can enable it on their devices or inside their email applications, which can also affect the appearance of emails they receive in their inboxes.
How does it affect my emails?
Email clients use their own sets of rules to interpret the colours in your emails and decide whether to adjust them to the dark mode or not. It's worth keeping in mind that each application, website, or email client applies the dark colour scheme using a different set of rules - some may invert all the colours, some can only use a partial inversion, and others may not change the colour scheme at all. The dark mode display can even vary within the same email client.
For instance, Gmail's dark mode on iOS differs from the Android version. As a result, it's virtually impossible to account for every single version of dark mode. There are simply too many variations, and on top of that, applications and email clients don't share the exact rule sets they use for their dark modes.
What can I do to make my email look good in dark mode?
While it's not possible to directly edit the dark mode version of the email, there are some aspects of the design you can modify to make sure that the template is readable and accessible in both light and dark modes.
Here are our recommendations when it comes to designing your email design with dark mode in mind:
Use transparent images
Images won't be inverted in dark mode, so if you're using a JPG image with a white background, it will look perfect against the white background colour for your email. However, if the dark mode inverts the background colour of the email to black, your image will still have a white background, which may not look great. We'd always recommend using transparent PNG images in your emails to avoid this.
Add borders or shadows to your images
If you're using transparent images, such as logos or icons, adding a border or shadow is a good practice. For instance, if your logo is black and you're using a light background, the background colour may be inverted in a dark mode, making your image almost invisible against the dark background. However, adding a white border to the logo will make it perfectly visible even if the colours are inverted.
Make sure that your text is readable in dark mode
Even if your content looks perfectly fine in the light mode, it's always worth checking how it renders in the dark mode. Some colour contrasts may display differently when the colours are adjusted to a dark colour scheme. If you notice your content is not readable in the dark mode, we recommend testing your design with different colour combinations to see which works best for both light and dark modes.
Test your email
This is the most important aspect of ensuring your design displays correctly in dark mode. Testing your email will allow you to check if your design is readable and coherent in dark mode. If your design doesn't look great in a dark colour scheme, you can try different colour combinations and test your template again until you're satisfied with the result.
Experiment with colours
Sometimes, adding a slightly different shade of a chosen colour may completely change how your design displays in dark mode. For example, if you're using pure black (e.g. #00000) and pure white (e.g. #ffffff) in your email, it might help if you change your colours to be slightly off-black (e.g. #010101) and off-white (e.g. #fefefe). The change won't be noticeable in light mode but can improve your dark mode rendering, as the colour may be inverted to grey instead of stark black.
Embrace the dark mode
Yes, dark modes can significantly change the overall aesthetic of your email, especially if you carefully choose colours that correspond with your brand. However, it's worth keeping in mind that some people may prefer dark colour schemes for multiple reasons - it might be a personal preference or visual impairment. The most important thing is making sure that your email is easily readable and accessible, so we think it's best to work with the dark mode instead of trying to work against it.
How do I test my email in dark mode?
On EmailOctopus, you can use our Preview & test feature to send a test email to a couple of your own email addresses. Once you send an email to yourself, you can turn on the dark mode in your email application or browser to see how the email is displayed in the dark mode. It's helpful to test that in all the most prominent email clients - Gmail, Outlook, and Yahoo. If you know that many of your recipients use a different email client, it may also be worth testing for that inbox provider.
You can also use third-party platforms, such as Litmus or Email On Acid, that offer email testing for many different email clients with a single click.
Can I use a custom code to influence dark mode rendering?
If you're writing your own email code, there are some tricks you can implement to target different dark mode schemes. While completely controlling the dark mode behaviour is impossible, you can influence some dark mode rendering with custom code - Litmus has a great article about it here: Ultimate Guide to Dark Mode.
However, we'd only recommend this for users who are advanced with email HTML and CSS and who write their own email code from scratch using our Code your own editor.