What is dark mode
Dark mode is a setting available on most devices which sets the visual interface to be dark rather than light. Most apps on the device will adapt to this setting and implement their own dark interface, and many offer their own control to toggle dark mode on or off independently of any device settings.
Dark mode has different implications for emails and landing pages, and we’ll dive into both in this help doc. Click here to watch our demo.
Why use dark mode
People use dark mode for many reasons, and on many devices it automatically turns on at night. Some of the benefits of dark mode are:
Better for your eyes - dark mode can reduce eye strain.
Visibility - in some situations and for certain viewers, dark mode can improve readability.
Prolonged battery life - particularly in devices using OLED screens, dark mode wont drain your battery as much as a regular display.
It's cool! - There's no denying it, dark mode is the cool kid on the block in UX design right now.
Dark mode for emails
Many popular email clients have some kind of dark mode that either responds to device settings or can be enabled independently.
As well as darkening the visual interface, most major email clients also take the unusual step of forcibly darkening or inverting the colours in your emails.
They will generally adjust email background, border & text colours. The affected colours will be inverted from light to dark but also, surprisingly, from dark to light in some cases. Image and logo colors are not affected.
The way that dark mode affects your emails will vary between email clients. At the moment Gmail and Outlook on Windows have the most invasive color changes when dark mode is used.
Behaviour of the major email clients that have dark mode
Below is a table of all the major email clients that have a dark mode, and how they modify your email in dark mode.
Email client | Default behaviour in dark mode |
Apple Mail (iPhone & iPad) | May darken some elements, particularly white backgrounds |
Apple Mail (Mac) | May darken some elements, particularly white backgrounds |
Outlook (Mac - latest version) | Darkens bright colours and backgrounds, lightens text |
Outlook (Mac - older versions) | Darkens bright colours and backgrounds, lightens text |
Outlook (Windows 365 & 2021+) | Inverts all colours (white becomes black, black becomes white) |
Outlook App (Android) | Darkens bright colours and backgrounds, lightens text |
Outlook App (iOS) | Darkens bright colours and backgrounds, lightens text |
http://Outlook.com (Browser) | Darkens bright colours and backgrounds, lightens text |
Gmail App (iOS) | Inverts all colours (white becomes black, black becomes white) |
Gmail App (Android) | Darkens bright colours and backgrounds, lightens text |
Yahoo App (iOS) | Darkens bright colours and backgrounds, lightens text |
Yahoo App (Android) | Darkens bright colours and backgrounds, lightens text |
Can you customize the way an email looks in dark mode?
This depends on the email client.
Email clients can be split into two categories: those that allow you to control your email’s design in dark mode (using CSS) and those that don’t.
For those that do, Knak has dark mode editing which allows you to customise the images and colours that you want to display when the email is viewed in dark mode in compatible email clients.
Below is a table of all the major email clients with dark mode capabilities and whether they support dark mode editing:
Email client | Supports dark mode editing |
Apple Mail (iPhone & iPad) | Yes |
Apple Mail (Mac) | Yes |
Outlook (Mac) | Yes, in some versions. (Support can vary between installations. Still darkens elements that are considered too bright, click here to learn more) |
Outlook (Windows) | No |
Outlook App (Android) | No |
Outlook App (iOS) | No |
http://Outlook.com (Browser) | No |
Gmail App (iOS) | No |
Gmail App (Android) | No |
Yahoo App (iOS) | No |
Yahoo App (Android) | No |
For email clients that don’t support dark mode editing, Knak offers a range of best practice recommendations and optimizations as you build, to ensure your emails look their best.
Here's some more help docs that will assist you in the creation of Dark Mode friendly emails:
Dark Mode for Landing Pages
As Landing Pages are always viewed in a browser, the situation is much simpler because browsers do not make any automatic changes to your landing page’s appearance when dark mode is enabled on your device or operating system. And best of all, all the major browsers support dark mode editing.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com