{"id":8523,"date":"2022-05-20T16:58:40","date_gmt":"2022-05-20T15:58:40","guid":{"rendered":"https:\/\/mailsnap.ai\/?p=8523"},"modified":"2022-05-20T16:58:44","modified_gmt":"2022-05-20T15:58:44","slug":"everything-you-need-to-know-about-designing-emails-for-dark-mode","status":"publish","type":"post","link":"https:\/\/mailsnap.ai\/en\/design-and-ux\/everything-you-need-to-know-about-designing-emails-for-dark-mode","title":{"rendered":"Everything you Need to Know about Designing Emails for Dark Mode"},"content":{"rendered":"\n<p>Nowadays being an email marketer means so much more than just creating a wall of text, adding a pretty picture, and hitting \u201csend\u201d.<\/p>\n\n\n\n<p>It means being on top of news, updates, and changes, having&nbsp;<a href=\"https:\/\/elasticemail.com\/blog\/marketing_tips\/using-human-psychology-to-improve-your-email-marketing\" target=\"_blank\" rel=\"noreferrer noopener\">basic psychology<\/a>&nbsp;and behavioral knowledge, and most of all, recognizing when something is on the rise. If you are keeping up with the latest&nbsp;<a href=\"https:\/\/elasticemail.com\/blog\/marketing_tips\/top-10-email-marketing-trends-of-2020\" target=\"_blank\" rel=\"noreferrer noopener\">email marketing trends<\/a>&nbsp;you are aware of the increasing interest in dark mode. Many people, including me, enjoy the option of having a dark background. However, this poses a dilemma for email marketers, because while using the dark mode is fun, designing your emails for it &#8211; not so much.<\/p>\n\n\n\n<h2 class=\"has-huge-font-size wp-block-heading\">The trend on the rise<\/h2>\n\n\n\n<p>It seems like everybody who is anybody talks about the dark mode. Since 2019, all the industry leaders like Google and Apple and even Wikipedia publicly expressed their support for this feature. That puts email marketers in a difficult position, as optimizing for light and dark environments is not an easy task.&nbsp;<strong>But what is dark mode for email exactly?<\/strong><\/p>\n\n\n\n<p>Simply put, dark mode &#8211; also called a light-on-dark color scheme, is a way of displaying information using a light font and imagery on a dark background. It wasn\u2019t very popular. The dark-on-light color scheme simulated ink on paper and was an easier transition between the media.<\/p>\n\n\n\n<p>However, with time, many articles pointed out that dark mode saves battery and is easier on the eyes. It seems like a logical conclusion, as many people turn down the brightness on their devices when it\u2019s darker outside, due to their eyes hurting. The energy consumption was the main reason that companies started adding dark mode. The first one to do so was Microsoft, by adding a dark background to Windows Phone 7. After Google confirmed in 2018 that dark mode saves battery, other companies jumped on this train. And if products on which you can read emails have this option, so should the email itself.&nbsp;<\/p>\n\n\n\n<p>Now, dark mode is the hottest new thing after&nbsp;<a href=\"https:\/\/elasticemail.com\/blog\/updates\/how-to-use-email-automation-feature-in-elastic-email-guide-with-examples\" target=\"_blank\" rel=\"noreferrer noopener\">email automation<\/a>, and ignoring it would be a major mistake. You might ask &#8211; why? Why should you care about dark mode? Well, the main reason is accessibility. Do you think your recipients will switch their whole UI setting to read one of your emails (that would be only light mode optimized) or will they simply stop opening them? Even worse &#8211; unsubscribe? If you don\u2019t have cutting edge, revolutionary content you can bet the latter. So, in order to not lose subscribers, it\u2019s your duty to figure out this whole&nbsp;<em>dark mode for email<\/em>&nbsp;issue the online industry threw at you.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/elasticemail.com\/wp-content\/uploads\/2020\/08\/dark-mode-article-1-1024x359.png\" alt=\"dark mode email marketing\" class=\"wp-image-10444\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Dark mode for email saves battery life<\/h2>\n\n\n\n<p>The first, most basic claim is that dark mode actually uses less battery life than the dark-on-light option. That is only partially true &#8211; it all depends on your type of screen. Phones with OLED screens&nbsp;<a href=\"https:\/\/www.ifixit.com\/News\/16952\/does-dark-mode-really-save-battery-on-your-phone\" target=\"_blank\" rel=\"noreferrer noopener\">work differently<\/a>&nbsp;than traditional LCD screens. OLED screens can benefit from dark mode and that\u2019s because they are built differently. With this type, each pixel lights up individually. It means that the black pixel is deactivated &#8211; so it doesn\u2019t use up the battery. Up until recently, OLED wasn\u2019t as popular, but in iPhone X and newer Android models, the dark mode can indeed help with saving battery life.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Dark mode email is better for the eyes<\/h2>\n\n\n\n<p>Ever since our Internet fits in the palm of our hand, various researchers have been trying to figure out the strain that staring at a screen gives us. In&nbsp;<a href=\"https:\/\/bmjophth.bmj.com\/content\/3\/1\/e000146\" target=\"_blank\" rel=\"noreferrer noopener\">2018, there was a<\/a>&nbsp;study on digital eye strain that proved over 50% prevalence among computer users. And that is not good news. This condition can cause major headaches, apathy, and sharp pains. Even worse, it seems that nobody is truly safe from it. Nowadays, a lot of people work online, staring at their computer for 8 hours. Then, as soon as the work is done, they turn on their private electronics and spend another few hours in front of the screen.&nbsp;<\/p>\n\n\n\n<p>So, when the claim that dark mode can actually help with this condition came to light, everyone was eager to test it out. However, there is no scientific proof that dark mode actually helps with digital eye strain. Sure, dark mode is definitely less jarring when used at night or in a badly lit space, and designing emails for it makes them look easier on the eyes. But it can also cause users to spend more time on the application.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Email marketing dark mode is better long-term<\/h2>\n\n\n\n<p>We did mention just now that dark mode doesn\u2019t really help with digital eye strain, however, there\u2019s been claims that it can be beneficial if used consistently. A&nbsp;<a href=\"https:\/\/www.nature.com\/articles\/s41598-018-28904-x\" target=\"_blank\" rel=\"noreferrer noopener\">recent study made by Nature.com<\/a>&nbsp;indeed proved that although there is no visible difference while using different shades short-term, dark mode is actually helping with a condition called myopia (inability to see far objects clearly). The researchers tested two groups and measured the thickness of their choroid to establish if it changed. The thinning of this part of the eye is related to myopia.&nbsp;<\/p>\n\n\n\n<p>This study proved that although performance might be better when using the light mode, the dark mode has considerably better long-term effects on the eye.&nbsp;<strong>In conclusion, if you&#8217;re designing emails for the dark mode theme you are essentially helping people out on a long-term basis.<\/strong>&nbsp;Since you know, everybody reads their emails almost daily.<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Dark mode makes it easier to read<\/h2>\n\n\n\n<p>I\u2019m sure you\u2019ve heard that one. The&nbsp;<strong>email dark mode<\/strong>&nbsp;is easier on your eyes, which means that it has to be better to read with it. However, the truth might be disappointing.&nbsp;<\/p>\n\n\n\n<p>It turns out that people are far more used to black text on a white background, maybe due to the fact that before reading news online, you did it with a newspaper. However, a<a href=\"https:\/\/pubmed.ncbi.nlm.nih.gov\/23654206\/\" target=\"_blank\" rel=\"noreferrer noopener\">&nbsp;study conducted in 2013<\/a>, proved that positive polarity is better for focus and performance in younger and older users. It\u2019s simply easier to adjust to the white background as it is to a dark one. Users put more effort into concentrating when the letters are white. They also had a harder time proofreading and spotting mistakes.<\/p>\n\n\n\n<p>This, however, doesn\u2019t mean that everybody will find light mode better to read. There are various studies confirming that dark mode can be better for visually impaired people and for people suffering from light sensitivity. Therefore, reading a text can be much easier for them, and&nbsp;<strong>designing emails for dark mode<\/strong>&nbsp;help online marketing feel more inclusive.<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Different clients, different dark modes?&nbsp;<\/h2>\n\n\n\n<p>Currently, all the mainstream email clients have an option to toggle dark mode. The problem is, that they offer their services on various devices, and you won\u2019t find dark mode on every single one. Here is where dark mode is available:<\/p>\n\n\n\n<p><strong>Mobile Apps<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Gmail App (Android)<\/li><li>Gmail App (iOS)<\/li><li>Outlook App (Android)<\/li><li>Outlook App (iOS)<\/li><\/ul>\n\n\n\n<p><strong>Desktop Clients<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Apple Mail<\/li><li>Outlook 2019 (Mac OS)<\/li><li>Outlook 2019 (Windows)<\/li><\/ul>\n\n\n\n<p><strong>Web Clients<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Outlook.com<\/li><\/ul>\n\n\n\n<p>There is another catch. Not only dark mode is available in selected devices it can be displayed differently depending on the provider. This means that the design of your email will change depending on which service the user utilizes.<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">No color changes<\/h2>\n\n\n\n<p>Some email clients give you the option to change the UI to dark mode, but they don\u2019t make any changes in the email itself. It means that email will look exactly the same no matter the app setting.<\/p>\n\n\n\n<p>This option is possible in iOS and Apple Mail, so if most of your recipients are using this email client, you basically don\u2019t need to optimize your emails to dark mode. There is one exception though. Plain-text emails will trigger the change to dark mode. Keep in mind that in order for email to stay in light mode you need to have a 2&#215;1 pixel size picture.<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Partial color change<\/h2>\n\n\n\n<p>This one ensures that all the light elements of email are turned dark. But dark text will also turn light to ensure readability. However, other dark elements will not be changed. This can be observed in Outlook.com.<\/p>\n\n\n\n<p>This one seems the smartest way to switch emails to dark mode, but it can have catastrophic effects on your logos and branding. With some of the colors inverted, your brand consistency might be at risk. Furthermore, this mode requires a bunch of testing to make sure your colors are not too light to be inverted or too dark to get lost in the dark background.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/elasticemail.com\/wp-content\/uploads\/2020\/08\/Group-278.png\" alt=\"email dark mode\" class=\"wp-image-10441\"\/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Full-color change<\/h2>\n\n\n\n<p>The most invasive one, very difficult to navigate and sadly one of the most popular ones. Full-color change is used in Outlook 2019 and Gmail App on iOS, which are two of the main email clients online.<\/p>\n\n\n\n<p>This invert is full. It means that light elements will become dark, but dark elements will also be inverted. This one is tricky and requires a lot of testing to make sure your email is readable and consistent with your brand. You also need to take into consideration that this option does not allow dark mode targeting, which means that you cannot override the user settings.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/elasticemail.com\/wp-content\/uploads\/2020\/08\/Group-277-763x1024.png\" alt=\"dark mode email\" class=\"wp-image-10440\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"has-huge-font-size wp-block-heading\">How to design emails for dark mode?<\/h2>\n\n\n\n<p>Let\u2019s be honest &#8211; a good email has to look good both in light and dark mode. That\u2019s why when&nbsp;<em>designing emails for dark mode<\/em>, you need to keep in mind both options and how the end result will render in recipient inboxes. This can be a daunting task but there are some basic tricks that will help you start.<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">1. Use transparent images<\/h2>\n\n\n\n<p>Email clients that allow users to switch to dark mode invert email colors in CSS, but they don\u2019t touch the images. That\u2019s why if you are using an image that is supposed to blend in nicely with the background you need to make some adjustments. Otherwise, it\u2019s not gonna look good inverted. It\u2019s best to use images with a transparent background. That way you will ensure that your email will look cohesive and the pictures won\u2019t be awkward.&nbsp;<\/p>\n\n\n\n<p>Alternatively, you can use this to make your email stand out. If you feel like the picture will add a quirky factor and will make your email look more interesting, try using the regular format. However, keep in mind that you need to make sure the design is flawless and it\u2019s gonna work well.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">2. Test everything<\/h2>\n\n\n\n<p>For every email you create you need to test to perfection. If you are adjusting one thing, you must make sure that it looks good both in light and dark mode. Any line of code that you change has to be tested. Experiment with shades, as stark white and black, doesn\u2019t always look the best. Match color tones together and invert them to see if they still look good. Pay attention to your fonts and always keep in mind that there are 3 different ways your email is displayed. That means that you need to tweak designing emails for the dark mode to perfection.<\/p>\n\n\n\n<p>In short, check if everything flows and do it with every email. With time, you will find what works and what doesn\u2019t but even if you found your design protocol, you still need to double-check how it looks. And always keep in mind that email and its features are constantly changing. This means that at some point, the dark mode could be different too.&nbsp;<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">3. Add white stroke around dark fonts<\/h2>\n\n\n\n<p>Not every logo is designed to look perfect no matter where you put it. Usually, brands create some variations that will look good on dark and light backgrounds but when it comes to optimizing email, this gets a bit more complicated. After all, you really can\u2019t be sure which mode your recipients are using to ensure your logo is visible. The same goes for when you are using text on a transparent picture. I\u2019m sure you can imagine how the black font will look when it has no background and the colors will be inverted?<\/p>\n\n\n\n<p>There are ways to change that. A simple fix &#8211; adding a white border. Giving your logo or text a white border is a fool-proof way to make it visible, no matter the color of your background. While the border won\u2019t be visible on the white background it will stand out in the dark.<\/p>\n\n\n\n<p>If you have a light logo you can use the black border or pretty much any color you feel would look good on a white or black background. Keep in mind that it\u2019s best to test it to make sure it\u2019s consistent with the rest of the email and with your brand.<\/p>\n\n\n\n<p>When it comes to displaying your logo in an email, most companies have variations that will look good on light and dark themes, usually with transparent backgrounds. Now, the logos are pictures, which means that they won\u2019t be inverted. You again need to ensure that your brand will be displayed correctly.<\/p>\n\n\n\n<h2 class=\"has-large-font-size wp-block-heading\">Targeting dark mode in email clients<\/h2>\n\n\n\n<p>So the good news is that dark mode does not impact HTML emails by default. This means that they are not going to change no matter to which mode the application is set up. That also means that you need to do the work yourself. And that is where you can \u201chack\u201d the system to start designing emails that work for dark mode.&nbsp;<\/p>\n\n\n\n<p>First, if you need to make sure that dark mode is enabled in your emails, you need to include a line of code in your &lt;head&gt; tag. This is used to check if the device has light mode or dark mode enabled. But a heads up that this line will not always work, but you can check where it\u2019s applicable&nbsp;<a href=\"https:\/\/www.caniemail.com\/features\/css-at-media-prefers-color-scheme\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p>Sadly, based on the site above, most of the major clients do not support this option. However, there is no harm in adding it, just to be on the safe side.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"color-scheme\" content=\"light dark\"&gt;\n&lt;meta name=\"supported-color-schemes\" content=\"light dark\"&gt;\n&lt;style type=\"text\/css\"&gt;\n:root {\n    color-scheme: light dark;\n    supported-color-schemes: light dark;\n  }\n&lt;\/style&gt;\n\nThen add this media query to your CSS:\n\n@media (prefers-color-scheme: dark) {\n  body {\n    background-color: #3D3E40;\n    color: #FEFEFD;\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  body {\n    background-color: #FEFEFD;\n    color: #3D3E40;\n  }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"has-normal-font-size wp-block-heading\">Conclusion about dark mode email marketing<\/h2>\n\n\n\n<p>Creating an email that will look good both in light and in dark mode is no easy task. It requires a lot of patience and even more testing. However, with some simple tweaks and our guide, you can create a beautiful email that will look good in any email client.&nbsp;<strong>So get to it and start designing emails for dark mode right now!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It means being on top of news, updates, and changes, having\u00a0basic psychology\u00a0and behavioral knowledge, and most of all, recognizing when something is on the rise. If you are keeping up with the latest\u00a0email marketing trends\u00a0you are aware of the increasing interest in dark mode. Many people, including me, enjoy the option of having a dark background. However, this poses a dilemma for email marketers, because while using the dark mode is fun, designing your emails for it &#8211; not so much.<\/p>\n","protected":false},"author":1,"featured_media":8525,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"categories":[76],"tags":[152,135,155],"class_list":["post-8523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-and-ux","tag-dark-mode","tag-deliverability","tag-email-design"],"_links":{"self":[{"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/posts\/8523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/comments?post=8523"}],"version-history":[{"count":0,"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/posts\/8523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/media\/8525"}],"wp:attachment":[{"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/media?parent=8523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/categories?post=8523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mailsnap.ai\/en\/wp-json\/wp\/v2\/tags?post=8523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}