Welcome to the
Force24 Support Hub

Designing emails for dark mode

Dark mode is a display setting that changes the colours used by a device or email application, usually replacing light backgrounds with darker ones and dark text with lighter text.

Although dark mode can make emails more comfortable to read, it can also affect how your email campaigns look. Background colours, text, buttons, and logos may appear differently depending on the recipient's device and email application.

As these changes are controlled by the recipient's email application rather than Force24, it is important to design your emails so they are easy to read and use in both light and dark mode.

How does dark mode affect emails?

Different email applications handle dark mode in different ways. Some leave your email colours unchanged, while others partially or fully invert them.

• No colour changes: Some email applications leave your email design as it was originally created.
• Partial colour inversion: Some applications change lighter backgrounds to darker shades and adjust text colours, while leaving certain elements unchanged.
• Full colour inversion: Other applications change most or all of the colours in your email, including backgrounds and text that were already designed for dark mode.

The same email can therefore look different depending on whether it is opened in Gmail, Outlook, Apple Mail, or another email application. Even the same application can behave differently across desktop and mobile devices.

The aim is not necessarily to make your email look identical everywhere, but to ensure that its content remains readable and its important elements remain visible.

Recommendations for designing emails for dark mode

1. Choose background and text colours carefully

Consider using dark greys and off-whites instead of pure black (#000000) and pure white (#FFFFFF) for your backgrounds and text.

Some email applications use these extreme light and dark values when deciding which colours to adjust. However, there is not a universal rule for how colours will be changed, so it is important to test your design rather than relying on a particular colour to remain unchanged.

For example, you could use:

• Dark grey (#1A1A1A) instead of pure black.
• Off-white (#F5F5F5) instead of pure white.

These softer shades can help create a more comfortable contrast while giving your email a better chance of maintaining its intended appearance.

2. Use clearly visible buttons

Calls to action should remain easy to identify and use, regardless of how the surrounding colours change. We recommend using solid, coloured buttons with a contrasting text colour, rather than relying on transparent or border-only buttons.

For example, a bright blue button with white text is generally more reliable than a black button with dark text or a thin outline that could disappear against a dark background.

Where appropriate, you can also add a border in a slightly lighter shade to help define the button's edges.

3. Give important elements their own background

Consider adding a background colour behind important elements such as buttons, logos, and calls to action. This helps separate them from the main email background and can make them easier to identify if the surrounding colours change.

However, bear in mind that some email applications may also change the background colour of these elements, so it is still important to test how they appear.

4. Make sure your logos and images remain visible

Logos and icons can become difficult to see if their original colours blend into the background after dark mode has been applied. Where possible, use transparent PNG images and leave some space around them so they do not sit directly against a background that could change colour.

If your logo contains dark text or artwork, consider using a version that remains visible against both light and dark backgrounds. Alternatively, placing your logo on a fixed-colour background can help maintain its visibility, although the surrounding email colours may still change.

For example, a logo with a white background may remain clearly visible in dark mode, but it could also create a noticeable white box against a darker email background.

5. Keep important text as live text

Where possible, use live text rather than placing important content inside images. Live text is generally easier to read when an email application changes its colours, and it also allows recipients to resize the text and use assistive technologies such as screen readers.

Text contained within an image cannot adapt in the same way, so it may become difficult to read if the surrounding background changes.

We recommend keeping important information, headings, and calls to action as live text wherever possible.

6. Check your brand colours

A colour that works well against a white background may look different or become difficult to distinguish against a dark background. Consider testing your brand colours against both light and dark backgrounds and adjusting them slightly where necessary.

It is also worth checking that your text remains easy to read. A good starting point is a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for larger text. Strong contrast helps make your email more accessible and can reduce the risk of important information becoming difficult to read when colours change.

Testing your emails in dark mode

Before sending your email campaign, we recommend testing how it appears in different email applications and display settings. To get started:

1. Send a test email to an inbox you can access.
2. Open the email on your phone or desktop in light mode.
3. Switch your device or email application's display setting to dark mode.
4. Open the same email again and check how the colours have changed.
5. Check that your text, buttons, logos, links, and important content remain visible and readable.
6. Where possible, repeat the test in other email applications, particularly those commonly used by your contacts.

Remember that a test in one email application will not necessarily reflect how your email will appear in another. Testing across different applications and devices will give you a better understanding of how your design holds up.

Dark mode is controlled by the recipient's device and email application, so there is not a single design that will look exactly the same for everyone. By using carefully chosen colours, strong contrast, clearly visible buttons, accessible text, and images that work against different backgrounds, you can help ensure your Force24 emails remain readable and effective in both light and dark mode. The most important thing is to test your emails before sending them, so you can identify and address any issues with how they appear to your contacts.