{"id":68686,"date":"2024-10-23T18:00:00","date_gmt":"2024-10-23T22:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=68686"},"modified":"2024-10-24T18:18:49","modified_gmt":"2024-10-24T22:18:49","slug":"coding-emails-for-dark-mode","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode","title":{"rendered":"The Developer&#8217;s Technical Guide to Coding Dark Mode Emails"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_a0424d9500e4896181a2739c2f01bfc1\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">We all know by now that Dark Mode is here to stay, with more than <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-client-market-share-infographic\"><span style=\"font-weight: 400;\">35% of subscribers<\/span><\/a><span style=\"font-weight: 400;\"> opening emails in Dark Mode. There are many benefits of Dark Mode: it reduces eye strain, enhances battery life on devices, and can improve focus by providing a less distracting interface. But despite its growing popularity, many still aren\u2019t designing or developing for it, which can impact the effectiveness of their email campaigns.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When we asked our beloved email geeks why this might be true, the most common answer was that coding emails for Dark Mode is often just <\/span><i><span style=\"font-weight: 400;\">hard<\/span><\/i><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But it doesn\u2019t have to be! Here\u2019s the inside scoop on <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\"><span style=\"font-weight: 400;\">Dark Mode tips<\/span><\/a><span style=\"font-weight: 400;\"> and the top challenges working with it can present.<\/span><\/p>\n<table style=\"background-color: #eaeef0;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px;\"><strong>Table of contents<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#challenges\"><span style=\"font-weight: 400;\">Biggest Dark Mode challenges for developers today<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#implementation\"><span style=\"font-weight: 400;\">6 steps to getting started with Dark Mode<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#troubleshooting\"><span style=\"font-weight: 400;\">Coding Dark Mode FAQs and troubleshooting tips<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#tips\"><span style=\"font-weight: 400;\">\ufe0f\u200d\ud83d\udd25 LitTips: advanced developer tips from Carin Slater<\/span><\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 id=\"challenges\"><span style=\"font-weight: 400;\">Biggest Dark Mode challenges for developers today<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s dive into the trickiest hurdles with Dark Mode and how to tackle them.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Challenge #1: there is no one Dark Mode<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The first rule of Dark Mode is that there is no one version of Dark Mode. <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/\"><span style=\"font-weight: 400;\">There are three default ways<\/span><\/a><span style=\"font-weight: 400;\"> that Dark Mode can be rendered:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>No color changes.<\/b><span style=\"font-weight: 400;\"> The design of the email stays the same, regardless of the UI being set to Dark Mode or Light Mode.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Partial color invert.<\/b><span style=\"font-weight: 400;\"> Inverts detected light backgrounds.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Full color invert.<\/b><span style=\"font-weight: 400;\"> Inverts areas with detected light backgrounds while also impacting dark backgrounds.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u00a0This\u2026 complicates things quickly, and can lead to inconsistencies in your email campaigns. It\u2019s not a one-size-fits-all setting or a slider that toggles on and off that you can solve for quickly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Chances are if you\u2019re having a problem coding for Dark Mode or dark theme, this is why. You created a beautiful email for one version of Dark Mode, but there are multiple versions out there, and the email you made simply isn\u2019t designed for that particular version.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, since there are several different versions of Dark Mode, the safest option is to simply assume that you have no control over Dark Mode.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cGreat,\u201d you might be thinking. \u201cThat\u2019s not helpful at all.\u201d Never fear! We\u2019re not done.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s how you work with these challenging parameters.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Challenge #2: you cannot control <\/span><i><span style=\"font-weight: 400;\">all<\/span><\/i><span style=\"font-weight: 400;\"> Dark Modes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The second rule of Dark Mode: <\/span><b>you can\u2019t control how subscribers view your emails.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">These two principles will form the backbone of all your work with Dark Mode:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Embrace progressive enhancement.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Be consistent with your email testing and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/6-crucial-email-qa-tasks-you-can-automate-with-litmus\" target=\"_blank\" rel=\"noopener\">quality assurance (QA)<\/a>.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Tip: embrace progressive enhancement<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">When working with Dark Mode\u2014or often, with email at all\u2014we like to use the principle of <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Progressive_Enhancement\"><span style=\"font-weight: 400;\">progressive enhancement<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What does that mean? <\/span><b>Progressive enhancement<\/b><span style=\"font-weight: 400;\"> means starting with what you can control, and workout outwards from there. Essentially, it\u2019s coding and designing for the lowest common denominator, so that your emails still display in a functional and pleasing way on older clients, desktops, and browsers.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote><p>&#8220;Progressive enhancement is essential for working with Dark Mode, since you can\u2019t control how people will be viewing your emails.&#8221;<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/carinslater\" target=\"_blank\" rel=\"noopener\">Carin Slater<\/a>, Manager, Lifecycle Email Marketing at Litmus<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">This approach to email development is fairly simple, in practice. Just determine the absolute basic level of functionality needed to view your email, and add more elaborate features from there.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A lot of variables can affect how much you add here; the two biggest being where your subscribers are opening your emails and how much time you have for development. Only add more advanced features if you\u2019re sure the client will support them. (And having a great <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\"><span style=\"font-weight: 400;\">email builder<\/span><\/a><span style=\"font-weight: 400;\"> that <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/help.litmus.com\/article\/617-dark-mode-builder\"><span style=\"font-weight: 400;\">displays changes for both Light and Dark Mode<\/span><\/a><span style=\"font-weight: 400;\"> absolutely helps.)<\/span><br \/>\n<script src=\"https:\/\/fast.wistia.com\/embed\/medias\/fs5m40y2xd.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding: 46.88% 0 0 0; position: relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; left: 0; position: absolute; top: 0; width: 100%;\">\n<div class=\"wistia_embed wistia_async_fs5m40y2xd seo=false videoFoam=true\" style=\"height: 100%; position: relative; width: 100%;\"><\/div>\n<\/div>\n<\/div>\n<p><em>When Dark Mode is toggled on in <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\" target=\"_blank\" rel=\"noopener\">Litmus Builder<\/a>, the live browser view applies the styles defined in your email using the CSS media query <code>@media (prefers-color-scheme: dark)<\/code>. <\/em><\/p>\n<p><b>\ud83d\udd25LitTip: View and optimize Dark Mode emails, as you code. <\/b><span style=\"font-weight: 400;\">The Dark Mode coding experience in<\/span> <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\"><span style=\"font-weight: 400;\">Litmus Builder<\/span><\/a><span style=\"font-weight: 400;\"> examines your email code for a CSS color-scheme element. If detected, you&#8217;ll see a browser preview of how your email looks in Dark Mode. If it&#8217;s not found, a notification will pop up with step-by-step instructions on how to add it, along with snippets to copy or save and best practices to consider as you build (included as part of our <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/new-dark-mode-visual-impairment\"><span style=\"font-weight: 400;\">Litmus Dark Mode features<\/span><\/a><span style=\"font-weight: 400;\"> for all paid plans!).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Be consistent with your email testing and QA<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Consistency is king! And the same applies to your email workflow. <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\"><span style=\"font-weight: 400;\">Email testing<\/span><\/a><span style=\"font-weight: 400;\"> and QA are some of the most vital steps to ensure every message appears and functions exactly as intended in your subscribers&#8217; inboxes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At its core, testing and QA ensures your message will appear and function exactly as intended in your subscribers&#8217; inboxes. This involves confirming that:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/subscription-email-templates.html\"><span style=\"font-weight: 400;\">Email templates<\/span><\/a><span style=\"font-weight: 400;\"> and headers\/footers work correctly<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/email-copywriting-kit\"><span style=\"font-weight: 400;\">Email copy<\/span><\/a><span style=\"font-weight: 400;\"> and content are error-free<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Links in text, <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/guide-to-ctas\/\"><span style=\"font-weight: 400;\">calls to action (CTAs)<\/span><\/a><span style=\"font-weight: 400;\">, images, and <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-bulletproof-buttons-in-email-design\"><span style=\"font-weight: 400;\">buttons<\/span><\/a><span style=\"font-weight: 400;\"> direct as intended<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Email <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-testing-the-rendering-of-every-email-you-send-increases-your-roi\/\"><span style=\"font-weight: 400;\">renders<\/span><\/a><span style=\"font-weight: 400;\"> properly across different <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-client-market-share\/\"><span style=\"font-weight: 400;\">email clients<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The email is <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/ultimate-guide-to-email-accessibility\/\"><span style=\"font-weight: 400;\">accessible<\/span><\/a><span style=\"font-weight: 400;\"> to all users<\/span><\/li>\n<\/ul>\n<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/how-often-do-email-apps-change-more-often-than-you-might-think\"><span style=\"font-weight: 400;\">Email clients are constantly changing<\/span><\/a><span style=\"font-weight: 400;\">, and frequent updates\u2014especially with features like Dark Mode\u2014can affect how emails render. The best way to stay ahead of these changes? Test every email with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"><span style=\"font-weight: 400;\">a tool like Litmus<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If your campaign includes <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-personalization\/\"><span style=\"font-weight: 400;\">email personalization<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/live-dynamic-content-to-increase-engagement\/\"><span style=\"font-weight: 400;\">dynamic content<\/span><\/a><span style=\"font-weight: 400;\">, QA also ensures that each version of the email contains the correct information.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also opt to keep your text content as black text on a white background.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote><p>&#8220;One simple thing that works well is to keep your text content as black text on a white background. It does mean some limitations on your design, but there is still plenty of opportunity to get creative around the outside of the text and make things look great.&#8221;<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/M_J_Robbins\" target=\"_blank\" rel=\"noopener\">Mark Robbins<\/a><\/figcaption><\/figure>\n<h2 id=\"implementation\"><span style=\"font-weight: 400;\">6 steps to designing and implementing Dark Mode emails<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are six essential steps to targeting Dark Mode styles across different email clients:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Step 1: <\/b><span style=\"font-weight: 400;\">Optimize your logos and other images for all Dark Mode rendering variations.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Step 2: <\/b><span style=\"font-weight: 400;\">Enable Dark Mode in email client user agents.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Step 3:<\/b><span style=\"font-weight: 400;\"> Add Dark Mode styles for Apple clients and iOS using the CSS media query<\/span> <span style=\"font-weight: 400;\"><code>@media (prefers-color-scheme: dark)<\/code><\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Step 4:<\/b><span style=\"font-weight: 400;\"> Duplicate Dark Mode styles for Outlook App using <\/span><span style=\"font-weight: 400;\">[data-ogsc]<\/span><span style=\"font-weight: 400;\"> or<\/span> <span style=\"font-weight: 400;\">[data-ogsb] <\/span><span style=\"font-weight: 400;\">prefix.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Step 5: <\/b><span style=\"font-weight: 400;\">Add your Dark Mode-only classes to your body HTML to allow for image\/style switching.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Step 6: <\/b><span style=\"font-weight: 400;\">Test, test, test!<\/span><\/li>\n<\/ul>\n<table style=\"background-color: #eaeef0;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 10px;\"><strong><span style=\"font-weight: 400;\">\ud83d\udca1 For a thorough rundown on the steps listed above, make sure to visit <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\"><b>Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community] \u2192<\/b><\/a><\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 id=\"troubleshooting\"><span style=\"font-weight: 400;\">Coding Dark Mode FAQs and troubleshooting tips<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you\u2019re familiar with the basics of Dark Mode, let\u2019s answer some common questions and share troubleshooting tips to help you refine your Dark Mode technique.<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><b>Dark Mode email image optimization<\/b>\n<ul>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#start\"><span style=\"font-weight: 400;\">Where\u2019s the best place to start when optimizing emails for Dark Mode?<\/span><\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#icons\"><span style=\"font-weight: 400;\">What are the best practices for creating Dark Mode-friendly logos and icons in emails?<\/span><\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#serve\">Is there a way to serve different images based on whether a user has Dark Mode enabled?<\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#filter-and-invert\"><span style=\"font-weight: 400;\">How can I use filter and invert properties to adjust images dynamically for Dark Mode?<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Client-specific challenges<\/b>\n<ul>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#support\"><span style=\"font-weight: 400;\">How do I code for Dark Mode, when the email client doesn\u2019t support it?<\/span><\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#different-ways\"><span style=\"font-weight: 400;\">What are the different ways Dark Mode renders on each email client?<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>CSS and conditional coding<\/b>\n<ul>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#css1\"><span style=\"font-weight: 400;\">How can I use CSS to apply different styles for Dark Mode in emails across various clients?<\/span><\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#css2\">How do I ensure fallback styles for non-supportive clients when coding for Dark Mode?<\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#css3\"><span style=\"font-weight: 400;\">Can I use CSS variables in emails for better Dark Mode support, and how does that impact older clients?<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Performance and optimization<\/b>\n<ul>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#loadtime\"><span style=\"font-weight: 400;\">How does Dark Mode affect the load time of emails, and what can I do to optimize it?<\/span><\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#conditional\"><span style=\"font-weight: 400;\">What are the most efficient ways to use conditional loading in Dark Mode emails?<\/span><\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#SVG\"><span style=\"font-weight: 400;\">Can using SVGs improve the performance and appearance of Dark Mode emails?<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Accessibility<\/b>\n<ul>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#contrast\"><span style=\"font-weight: 400;\">What color contrasts should I use to ensure my Dark Mode emails are accessible?<\/span><\/a><\/li>\n<li aria-level=\"1\"><a rel=\"noopener\" href=\"#readability\"><span style=\"font-weight: 400;\">What\u2019s the best way to handle light text on dark backgrounds for readability in emails?<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><b>Troubleshooting<\/b><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#unexpectedly\"><span style=\"font-weight: 400;\">Why does my email text color change unexpectedly in Dark Mode on certain clients?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#troubleshoot\"><span style=\"font-weight: 400;\">How can I troubleshoot issues with background images not displaying correctly in Dark Mode?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a rel=\"noopener\" href=\"#Outlook\"><span style=\"font-weight: 400;\">Why is my Dark Mode email not rendering as expected in the Outlook app?<\/span><\/a><\/li>\n<li aria-level=\"2\"><a rel=\"noopener\" href=\"#debug\">How do I debug CSS issues that only appear in Dark Mode on specific devices?<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Dark Mode email image optimization<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Images play a key role in your email design, and your logo is likely a constant across all of them. Here are some frequently asked questions about <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/optimize-imagery-for-dark-mode\"><span style=\"font-weight: 400;\">optimizing images for Dark Mode<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h4 id=\"start\"><span style=\"font-weight: 400;\">Where\u2019s the best place to start when optimizing emails for Dark Mode?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The best place to start with Dark Mode is with image optimization.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You know when you open an email in Dark Mode and you can\u2019t see the images, because they\u2019re now dark on a dark background? Yeah, that. We want to avoid that.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The simplest way to optimize your emails for dark themes is by ensuring your images display well, no matter which <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/dark-mode-vs-light-mode-email-design\"><span style=\"font-weight: 400;\">reading environment or Dark Mode settings<\/span><\/a><span style=\"font-weight: 400;\"> your subscribers are viewing your emails in.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote><p>&#8220;If you don&#8217;t have a developer on staff, optimizing your images to work everywhere is an easy way to fix for Dark Mode. You could implement this as a temporary fix and add the Dark Mode meta information and have decent dark mode emails.&#8221;<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/carinslater\" target=\"_blank\" rel=\"noopener\">Carin Slater<\/a>, Manager, Lifecycle Email Marketing at Litmus<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">The real struggle here, of course, is making sure that your images look good in <\/span><i><span style=\"font-weight: 400;\">both<\/span><\/i><span style=\"font-weight: 400;\"> Light and Dark Mode. Because you can\u2019t just switch to light colors and call it a day. What about the other half of your subscribers?\u00a0<\/span><\/p>\n<h4 id=\"icons\"><span style=\"font-weight: 400;\">What are the best practices for creating Dark Mode-friendly logos and icons in emails?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">As discussed earlier, first and foremost, you\u2019ll want to create Dark Mode optimized logos, icons, and any other pertinent email images for <\/span><i><span style=\"font-weight: 400;\">all<\/span><\/i><span style=\"font-weight: 400;\"> styles.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are a few stylistic routes you can take to make your design components Dark Mode friendly:<\/span><\/p>\n<ul>\n<li aria-level=\"1\"><strong>Design with midtones.<\/strong> <span style=\"font-weight: 400;\">This means using a color that has a high enough color contrast for both white and black because it falls toward the middle of the value range.<\/span><\/li>\n<\/ul>\n<ul>\n<li aria-level=\"1\"><strong>Use a glow or a stroke.<\/strong> <span style=\"font-weight: 400;\">This will depend on the type of image or icon\u2014for example, a glow works great with transparent PNGs with dark text.<\/span><\/li>\n<li aria-level=\"1\"><strong>Use a shape outline or background.<\/strong> <span style=\"font-weight: 400;\">This will help give your icons and logos a sharp, clean look.<\/span><\/li>\n<\/ul>\n<table style=\"background-color: #eaeef0;\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 10px;\"><strong><span style=\"font-weight: 400;\">\ud83d\udca1 For examples of this in action, visit <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/optimize-imagery-for-dark-mode\" target=\"_blank\" rel=\"noopener\"><b>A Beginner\u2019s Guide to Optimizing Imagery for Dark Mode Emails \u2192 <\/b><\/a><\/span><\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s an example to illustrate:<\/span><\/p>\n<table class=\"dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%\">\n<tbody>\n<tr>\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Light Mode<\/th>\n<td data-label=\"Light Mode\"><img decoding=\"async\" class=\"alignnone wp-image-72012 size-thumbnail\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-window-150x150.png\" alt=\"Light Mode window\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-window-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-window-300x298.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-window.png 380w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<td data-label=\"Light Mode\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72011\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-icon-150x150.png\" alt=\"Light Mode icon\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-icon-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-icon-300x298.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Light-Mode-icon.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr>\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Controlled Dark Mode<\/th>\n<td data-label=\"Controlled Dark Mode\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72017\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-window-150x150.png\" alt=\"Controlled Dark Mode window\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-window-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-window-298x300.png 298w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-window.png 378w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<td data-label=\"Controlled Dark Mode\"><img decoding=\"async\" class=\"alignnone wp-image-72016 size-thumbnail\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-icon-150x150.png\" alt=\"Controlled Dark Mode icon\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-icon-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-icon-298x300.png 298w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Controlled-Dark-Mode-icon.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr>\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode<\/th>\n<td data-label=\"Uncontrolled Dark Mode\"><img decoding=\"async\" class=\"alignnone wp-image-72019 size-thumbnail\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-window-150x150.png\" alt=\"Uncontrolled Dark Mode window\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-window-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-window-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-window.png 378w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<td data-label=\"Uncontrolled Dark Mode\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72018\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-icon-150x150.png\" alt=\"Uncontrolled Dark Mode icon\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-icon-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-icon-298x300.png 298w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-icon.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr>\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with glow effect<\/th>\n<td data-label=\"Uncontrolled Dark Mode with glow effect\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72021\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-window-150x150.png\" alt=\"Uncontrolled Dark Mode with glow window\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-window-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-window-298x300.png 298w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-window.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<td data-label=\"Uncontrolled Dark Mode with glow effect\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72020\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-icon-150x150.png\" alt=\"Uncontrolled Dark Mode with glow icon\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-icon-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-icon-298x300.png 298w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-glow-icon.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr>\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with stroke effect<\/th>\n<td data-label=\"Uncontrolled Dark Mode with stroke effect\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72023\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-window-150x150.png\" alt=\"Uncontrolled Dark Mode with stroke effect window\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-window-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-window-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-window.png 378w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<td data-label=\"Uncontrolled Dark Mode with stroke effect\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72022\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-icon-150x150.png\" alt=\"Uncontrolled Dark Mode with stroke effect icon\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-icon-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-icon-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-stroke-effect-icon.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr>\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with shape outline<\/th>\n<td data-label=\"Uncontrolled Dark Mode with shape outline\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72025\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-window-150x150.png\" alt=\"Uncontrolled Dark Mode with shape outline window\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-window-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-window-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-window.png 374w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<td data-label=\"Uncontrolled Dark Mode with shape outline\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72024\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-icon-150x150.png\" alt=\"Uncontrolled Dark Mode with shape outline icon\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-icon-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-icon-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-shape-outline-icon.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr>\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with background<\/th>\n<td data-label=\"Uncontrolled Dark Mode with background\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72027\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-window-150x150.png\" alt=\"Uncontrolled Dark Mode with background window\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-window-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-window-300x298.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-window.png 376w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<td data-label=\"Uncontrolled Dark Mode with background\"><img decoding=\"async\" class=\"alignnone size-thumbnail wp-image-72026\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-icon-150x150.png\" alt=\"Uncontrolled Dark Mode with background icon\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-icon-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-icon-298x300.png 298w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Uncontrolled-Dark-Mode-with-background-icon.png 374w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em><span style=\"font-weight: 400;\">Source: <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/optimize-imagery-for-dark-mode\"><span style=\"font-weight: 400;\">A Beginner\u2019s Guide to Optimizing Imagery for Dark Mode Emails\u00a0<\/span><\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">After you make your design components, you\u2019ll want to create alternate versions of your images for clients that do support image swap. <\/span><i><span style=\"font-weight: 400;\">Why not start with this?<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Some email clients support Dark Mode, while others don\u2019t, so we can\u2019t assume we\u2019ll be able to switch out the images in every email. But, when we can, we should!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s an example of what this would look like in practice. First, let\u2019s look at the Light Mode version of the image. This is the original that we\u2019ll use in every instance where Light Mode is specified.<\/span><\/p>\n<p><b>Light Mode version:<\/b><\/p>\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/litmusliveimage1.png\" \/>\n<p><span style=\"font-weight: 400;\">Next, the Dark Mode version of the image where image swap is NOT supported. This is what we\u2019ll use when we can\u2019t control what\u2019s going on in Dark Mode. (Note: we went with the approach of adding circles behind the icons!)<\/span><\/p>\n<p><b>Dark Mode where image swap is <\/b><span style=\"text-decoration: underline;\"><b>not<\/b><\/span><b> supported:\u00a0<\/b><\/p>\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/litmus-live-dark-mode-no-image-swap.png\" \/>\n<p><span style=\"font-weight: 400;\">And finally, here\u2019s the Dark Mode version of the image where image swap IS supported. This is what we\u2019ll use when we can control what\u2019s going on in Dark Mode. Note the lighter icons on the dark background!<\/span><\/p>\n<p><b>Dark Mode where image swap <\/b><span style=\"text-decoration: underline;\"><b>is<\/b><\/span><b> supported:\u00a0<\/b><\/p>\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/litmus-live-dark-mode-supported.png\" \/>\n<p><span style=\"font-weight: 400;\">This iterative approach to image optimization ensures that every possibility is accounted for, while not trying to make things happen in email clients and operating systems where it cannot be accomplished. It\u2019s all about being flexible!<\/span><\/p>\n<h4 id=\"serve\"><span style=\"font-weight: 400;\">Is there a way to serve different images based on whether a user has Dark Mode enabled?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Yes! You can serve different images based on whether a user has Dark Mode enabled by using the CSS media query <\/span><span style=\"font-weight: 400;\"><code>@media (prefers-color-scheme: dark)<\/code> <\/span><span style=\"font-weight: 400;\">or<\/span><span style=\"font-weight: 400;\"> <code>[data-ogsc]<\/code> <\/span><span style=\"font-weight: 400;\">in your CSS depending on which client you are trying to swap the images in. This allows you to specify different image sources for Dark Mode.\u00a0 To ensure this method functions properly in Apple Mail (included with macOS), remember to add the necessary Dark Mode meta tags and styles to the <code>&lt;head&gt;<\/code><\/span> <span style=\"font-weight: 400;\">of your email.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also show or hide images.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This code snippet for Dark Mode image swap works in Apple\/iOS and sets up the images to swap in Outlook.com as well. To ensure the swap on Outlook.com, the images will need to be linked.<\/span><\/p>\n<figure style=\"width: 1380px\" class=\"wp-caption alignnone\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/270-show-hide-images-for-dark-mode\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Dark-Mode-ShowHide-Images.jpg\" alt=\"\" width=\"1380\" height=\"1059\" \/><\/a><figcaption class=\"wp-caption-text\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/270-show-hide-images-for-dark-mode\">Grab the code in Litmus Community \u2192<\/a><\/figcaption><\/figure>\n<h4 id=\"filter-and-invert\"><span style=\"font-weight: 400;\">How can I use filter and invert properties to adjust images dynamically for Dark Mode?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The CSS filter property has limited support in email, so its effectiveness really depends on where your audience is opening their emails. (Pro tip: you can find out where your subscribers are opening with Litmus&#8217; <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-analytics\"><span style=\"font-weight: 400;\">Email Analytics<\/span><\/a><span style=\"font-weight: 400;\"> tracking pixel.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here at Litmus, for example, our most common opens happen in Gmail, and we\u2019re seeing only about 15% support for the filter property, which means we generally avoid using it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to Can I Email, this property only sees <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.caniemail.com\/features\/css-filter\/\"><span style=\"font-weight: 400;\">about 45% support<\/span><\/a><span style=\"font-weight: 400;\">. Much of that support comes from email clients based outside the United States (U.S.).\u00a0 If your audience uses those emails clients, test and see what works!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Client-specific challenges<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Now onto the nitty-gritty: working with Dark Mode across several email clients.<\/span><\/p>\n<h4 id=\"support\"><span style=\"font-weight: 400;\">How do I code for Dark Mode when an email client doesn\u2019t support it?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a deeper look at some of <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-client-market-share\"><span style=\"font-weight: 400;\">the most popular email clients<\/span><\/a><span style=\"font-weight: 400;\">: Outlook, Gmail, and Apple.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Outlook for desktop and Gmail don\u2019t allow you to target Dark Mode with specific code, so you can\u2019t fully control how your emails appear. Instead, these clients apply their own partial color invert, which automatically inverts light backgrounds.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Outlook desktop<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">For Outlook desktop, unfortunately there\u2019s no coding workaround.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-105286\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/Dark-Mode-Mantra.png\" alt=\"Dark Mode mantra\" width=\"1200\" height=\"1200\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/Dark-Mode-Mantra.png 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/Dark-Mode-Mantra-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/Dark-Mode-Mantra-1024x1024.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/Dark-Mode-Mantra-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/10\/Dark-Mode-Mantra-768x768.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/>\n<p><span style=\"font-weight: 400;\">Your best approach is to:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Preview how the email appears in Dark Mode.<\/b> <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"><span style=\"font-weight: 400;\">Email testing<\/span><\/a><span style=\"font-weight: 400;\"> in Litmus can help with that.)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Make sure your images are optimized <\/b><span style=\"font-weight: 400;\">for Dark Mode (see above!).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>If a color looks off or isn\u2019t <\/b><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\"><b>accessible<\/b><\/a><b>,<\/b><span style=\"font-weight: 400;\"> find an alternative that works better while staying true to your brand guidelines. You can also use some VML to get around it, but keep in mind that VML isn\u2019t accessible.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">It can be tricky to balance brand standards with these limitations, but these steps are part of the <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/dark-mode-email-best-practices\"><span style=\"font-weight: 400;\">Dark Mode best practices<\/span><\/a><span style=\"font-weight: 400;\"> we follow and recommend at Litmus.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The attributes<\/span><span style=\"font-weight: 400;\"> <code>[data-ogsc]<\/code> <\/span><span style=\"font-weight: 400;\">and<\/span><span style=\"font-weight: 400;\"> <code>[data-ogsb]<\/code> <\/span><span style=\"font-weight: 400;\">are used to target Outlook Web App and Outlook mobile, although there\u2019s no way to target iOS and Android specifically. This targeting method, <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402\"><span style=\"font-weight: 400;\">first introduced by Mark Robbins<\/span><\/a><span style=\"font-weight: 400;\">, allows for more control over Outlook styling.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>[data-ogsc] <\/b><span style=\"font-weight: 400;\">manages color and other elements like image swaps.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>[data-ogsb]<\/b><span style=\"font-weight: 400;\"> controls background elements, such as the button\u2019s background color.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">However, keep in mind that for image swaps to work in Outlook Web App, the images must be linked.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Gmail<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">As we mentioned, Gmail partially inverts colors, so you don\u2019t have full control over everything, but there are a couple hacks that will work.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/HTeuMeuLeu\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">R\u00e9mi Parmentier<\/span><\/a><span style=\"font-weight: 400;\"> offers a great trick for keeping <\/span><b>white text white in Gmail Dark Mode. <\/b><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/268-keeping-white-text-white-in-gmail-dark-mode-remi-parmentier\"><b>Code available in Litmus Community \u2192 <\/b><\/a><b>\u00a0<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/The_Annett\"><span style=\"font-weight: 400;\">Annett Forcier <\/span><\/a><span style=\"font-weight: 400;\">has a similar hack but for <\/span><b>overriding Dark Mode background colors<\/b><span style=\"font-weight: 400;\"> to keep the one you originally intended. <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/267-override-dark-mode-background-colors-annett-forcier\"><b>Code available in Litmus Community \u2192 <\/b><\/a><b>\u00a0<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">By implementing these two hacks, you can keep your buttons in the color you want, for example! Just keep in mind, Gmail\u2019s Dark Mode only works on mobile\u2014it\u2019s not available on desktop.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Apple<\/span><\/h5>\n<p><span style=\"font-weight: 400;\">With Apple Mail, you have much more flexibility since you can use media queries. However, it does have a few quirks:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Apple Mail will automatically flip white text (#FFFFFF), so to avoid this, use an off-white shade like #FDFDFD.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The same goes for black text (#000000)\u2014opt for a slightly off-black color like #010101 to prevent unwanted color inversion.<\/span><\/li>\n<\/ul>\n<h4 id=\"different-ways\"><span style=\"font-weight: 400;\">What are the different ways Dark Mode renders on each email client?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Dark Mode can render an email in three default ways:<\/span><\/p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\" cellspacing=\"0\" cellpadding=\"10\">\n<thead>\n<tr style=\"background-color: #f0f0f0;\">\n<th>No color changes<\/th>\n<th>Partial color inversion<\/th>\n<th>Full color inversion<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left; vertical-align: top;\">Apple Mail<\/td>\n<td style=\"text-align: left; vertical-align: top;\">Outlook Web App<\/td>\n<td style=\"text-align: left; vertical-align: top;\">Gmail app (iOS)<br \/>\nOutlook 2021 (Windows)<br \/>\nOffice 365 (Windows)<br \/>\nWindows Mail<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\"><br \/>\nLet\u2019s look at examples of each in the screenshots below:<\/span><\/p>\n<table class=\"dcf-table dcf-table-responsive dcf-table-bordered dcf-w-100%\">\n<thead>\n<tr>\n<th style=\"text-align: center;\" scope=\"col\">No color change<\/th>\n<th style=\"text-align: center;\" scope=\"col\">Partial color inversion<\/th>\n<th style=\"text-align: center;\" scope=\"col\">Full color inversion<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th scope=\"row\"><img decoding=\"async\" class=\"wp-image-71916 alignleft\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-1.png\" alt=\"\" width=\"350\" height=\"960\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-1.png 371w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-1-109x300.png 109w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/th>\n<td data-label=\"Partial color invert\"><img decoding=\"async\" class=\"wp-image-71917 alignleft\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-2.png\" alt=\"\" width=\"350\" height=\"959\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-2.png 371w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-2-109x300.png 109w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/td>\n<td data-label=\"Full color invert\"><img decoding=\"async\" class=\"wp-image-71918 alignleft\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-3.png\" alt=\"\" width=\"350\" height=\"961\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-3.png 371w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Dark-Mode-rendering-3-109x300.png 109w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\"><br \/>\nOf course, it\u2019s never simple\u2014and you can\u2019t assign just one Dark Mode solution to the problem as each email client has varying degrees of control:<\/span><\/p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\" cellspacing=\"0\" cellpadding=\"10\">\n<thead>\n<tr style=\"background-color: #f0f0f0; border-bottom: 2px solid #000;\">\n<th style=\"width: 33.33%; text-align: left;\">Almost full control<\/th>\n<th style=\"width: 33.33%; text-align: left;\">Partial Control (using hacks)<\/th>\n<th style=\"width: 33.33%; text-align: left;\">No control<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"border-bottom: 1px solid #ccc;\">\n<td style=\"width: 33.33%; text-align: left; vertical-align: top;\">Apple Mail<\/td>\n<td style=\"width: 33.33%; text-align: left; vertical-align: top;\">Gmail (mobile)<br \/>\nOutlook Web App<br \/>\nOutlook (mobile)<\/td>\n<td style=\"width: 33.33%; text-align: left; vertical-align: top;\">Outlook desktop<br \/>\nGmail desktop<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #ccc;\">\n<td style=\"width: 33.33%; text-align: left; vertical-align: top;\">(Apple is no change when you don\u2019t implement any Dark Mode code whatsoever. Once you implement it, you can do all kinds of \u2728magic \ud83e\ude84)<\/td>\n<td style=\"width: 33.33%; text-align: left; vertical-align: top;\">(Both full and partial invert)<\/td>\n<td style=\"width: 33.33%; text-align: left; vertical-align: top;\">(Full invert)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_6c41cf182393be596e79861f94a62e11\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Improve your emails for Dark Mode viewers<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Browse Litmus&#8217; Dark Mode resources hub for ways to enhance readability and user experience for your subscribers.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/dark-mode-email-best-practices\">\n\t\t\t\t\t\tImprove your emails\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_ecade6ffeecb3ab8b6af08ded966534b\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">CSS and conditional coding<\/span><\/h3>\n<h4 id=\"css1\"><span style=\"font-weight: 400;\">How can I use CSS to apply different styles for Dark Mode in emails across various <\/span><span style=\"font-weight: 400;\">clients?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Adding this metadata to your<\/span><span style=\"font-weight: 400;\"> <code>&lt;head&gt;<\/code><\/span><span style=\"font-weight: 400;\"> tag ensures that Dark Mode will be enabled in your emails for subscribers who have it\u00a0 turned on.<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;meta name=\"color-scheme\" content=\"light dark\"&gt; &lt;meta name=\"supported-color-schemes\" content=\"light dark\"&gt;<\/span><\/code><\/p>\n<h4 id=\"css2\"><span style=\"font-weight: 400;\">How do I ensure fallback styles for non-supportive clients when coding for Dark Mode?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">If a client doesn\u2019t support Dark Mode, the best approach is to test how your images and colors appear and make any necessary adjustments to maintain a subscriber-friendly experience and user interface.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We recommend creating a Litmus Builder file with a table of your brand colors to see how they render across various Dark Mode. This allows you to fine-tune any colors that don\u2019t translate well\u2014for example, some yellows might end up looking unpleasant or muddy.<\/span><\/p>\n<h4 id=\"css3\"><span style=\"font-weight: 400;\">Can I use CSS variables in emails for better Dark Mode support, and how does that impact older clients?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">There\u2019s no support for CSS variables (outside of Apple Mail) in the U.S.\u00a0 However, many email clients outside the U.S. do support them. It\u2019s a good idea to check your audience\u2019s email client market share to determine if using CSS variables makes sense for your specific case. (I haven&#8217;t used CSS variables personally, so I can&#8217;t speak to them from experience.)<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Performance and optimization<\/span><\/h3>\n<h4 id=\"loadtime\"><span style=\"font-weight: 400;\">How does Dark Mode affect the load time of emails, and what can I do to optimize it?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">This should have a relatively minimal impact. Adding Dark Mode styles won\u2019t significantly increase your code size, and including Dark Mode versions of your images won\u2019t affect load times. Only the relevant images will load\u2014Dark Mode images won&#8217;t load in Light Mode, and vice versa.<\/span><\/p>\n<h4 id=\"conditional\"><span style=\"font-weight: 400;\">What are the most efficient ways to use conditional loading in Dark Mode emails?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Conditional loading is not supported in email. Typically, conditional coding refers to techniques for Outlook desktop, which doesn\u2019t offer a controllable Dark Mode\u2014though that\u2019s not entirely true, either.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are two hacks for handling Dark Mode in Outlook when using conditional coding with VML:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Keep text the same color in Outlook\u2019s Dark Mode<\/b> <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/269-keep-text-the-same-color-in-outlook-s-dark-mode-nicole-merlin\"><b>[Snippet]<\/b><\/a><span style=\"font-weight: 400;\"> \u2013 <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/nicole-merlin\/\"><span style=\"font-weight: 400;\">Nicole Merlin<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fix VML button background colors for Dark Mode<\/b> <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/271-fixing-vml-button-background-colors-for-dark-mode-wilbert-heinen\"><b>[Snippet]<\/b><\/a><span style=\"font-weight: 400;\"> \u2013 <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/wilbertheinen?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAAAMDl5sBUQlzlWv8ghd4g17qyjloGSfVZ8Q&amp;lipi=urn%3Ali%3Apage%3Ad_flagship3_search_srp_all%3BvvcRt05VQKOTHJk0iRx0BQ%3D%3D\"><span style=\"font-weight: 400;\">Wilbert Heinen<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">That said, We try to steer clear of VML as <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/sarahjoga?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAAAEqgqQBjGqkfwa93rrXrTZJMHEXrCc-nA4&amp;lipi=urn%3Ali%3Apage%3Ad_flagship3_search_srp_all%3BXBJcr%2FdwQoSnyo5YwLZpMA%3D%3D\"><span style=\"font-weight: 400;\">Sarah Gallardo<\/span><\/a><span style=\"font-weight: 400;\"> has pointed out that there are accessibility issues with VML. Additionally, the newest version of Outlook (and presumably all versions going forward) will not support VML, so it\u2019s better to look ahead. However, this doesn\u2019t help much if you\u2019re still coding for audiences using older versions like Outlook 2013.<\/span><\/p>\n<h4 id=\"SVG\"><span style=\"font-weight: 400;\">Can using SVGs improve the performance and appearance of Dark Mode emails?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">SVGs have very limited support with U.S. based email clients. If your audience uses email clients based outside the U.S., there\u2019s more support to be found there and you can use them. We at Litmus do not use SVGs in our emails.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Accessibility<\/span><\/h3>\n<h4 id=\"contrast\"><span style=\"font-weight: 400;\">What color contrasts should I use to ensure my Dark Mode emails are accessible?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">You should always aim to meet <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG2AAA-Conformance\"><span style=\"font-weight: 400;\">WCAG level AAA<\/span><\/a><span style=\"font-weight: 400;\"> compliance to ensure your emails are accessible to the widest audience. However, we live in an imperfect world, so if achieving AAA isn\u2019t possible, we settle for passing WCAG level AA.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tools like <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">WebAIM\u2019s Contrast Checker<\/span><\/a><span style=\"font-weight: 400;\"> can help you evaluate your color contrast. To check if your default Dark Mode colors meet these standards, use a color picker browser extension to grab colors from a Dark Mode preview, then <\/span><span style=\"font-weight: 400;\">run them through the contrast checker.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">What\u2019s the best way to handle light text on dark backgrounds for readability in emails?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Make sure your light text isn\u2019t too thin. If your base font is too thin, then bold it in Dark Mode if your brand requires you to stick with the thin font. Avoid using pure white (<\/span><span style=\"font-weight: 400;\">#FFFFFF<\/span><span style=\"font-weight: 400;\">) on a pure black background (<\/span><span style=\"font-weight: 400;\">#000000<\/span><span style=\"font-weight: 400;\">). Not only does this create accessibility challenges, but some email clients may override your settings and invert these colors in Dark Mode, even if you explicitly specify them.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Troubleshooting<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Why does my email text color change unexpectedly in Dark Mode on certain clients?\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">To troubleshoot, ask yourself the following questions:<\/span><\/p>\n<ul>\n<li><b>Is it a client that you can control the colors on?<\/b><span style=\"font-weight: 400;\"> If not, the only thing you can do is pick a different color for your text.\u00a0<\/span><\/li>\n<li aria-level=\"1\"><b>Have you added the corresponding dark mode CSS (@media (prefers-color-scheme: dark) or [data-ogsc]?\u00a0<\/b><\/li>\n<li aria-level=\"1\"><b>Did you include the meta tag and CSS to indicate that you have Dark Mode styles? <\/b><span style=\"font-weight: 400;\">Add that in<\/span><\/li>\n<li aria-level=\"1\"><b>Is the text color you are using straight white or straight black? <\/b><span style=\"font-weight: 400;\">Pick a color that is slightly off (we use <\/span><span style=\"font-weight: 400;\">#FEFEFE <\/span><span style=\"font-weight: 400;\">and <\/span><span style=\"font-weight: 400;\">#0E0E0E <\/span><span style=\"font-weight: 400;\">at Litmus).<\/span><\/li>\n<\/ul>\n<h4 id=\"\"><span style=\"font-weight: 400;\">How can I troubleshoot issues with background images not displaying correctly in Dark Mode?\u00a0<\/span><\/h4>\n<p><b>Is your background image color being inverted?<\/b><span style=\"font-weight: 400;\"> Try a different image format if you can. This might solve the problem. If not, you might have to pick an image that works well in both light and dark mode.<\/span><\/p>\n<p><b>Is your background image not showing up? <\/b><span style=\"font-weight: 400;\">Background images aren\u2019t supported everywhere. Make sure to implement any <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\"><span style=\"font-weight: 400;\">Dark Mode email hacks<\/span><\/a><span style=\"font-weight: 400;\"> to make them show up and then <\/span><i><span style=\"font-weight: 400;\">duplicate <\/span><\/i><span style=\"font-weight: 400;\">those hacks for the Dark Mode versions.<\/span><\/p>\n<h4 id=\"Outlook\"><span style=\"font-weight: 400;\">Why is my Dark Mode email not rendering as expected in the Outlook app?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Because it\u2019s Outlook\u2014where email development goes to test your patience. But seriously, ensure your Dark Mode styles include <\/span><span style=\"font-weight: 400;\"><code>[data-ogsc]<\/code><\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\"><code>[data-ogsb]<\/code><\/span><span style=\"font-weight: 400;\"> before each CSS selector.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re using multiple selectors you\u2019ll have to repeat it for every selector:<\/span><\/p>\n<ul>\n<li>\u274c <code>[data-ogsc] p, p a, p span { color: #23b3c8; }<\/code><\/li>\n<li>\u2705 <code>[data-ogsc] p, [data-ogsc] p a, [data-ogsc] p span { color: #23b3c8; }<\/code><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Check to make sure you\u2019re using\u00a0 <code>[data-ogsc]<\/code> for colors and images and <code>[data-ogsb]<\/code> for background colors. If you\u2019re trying to change a background color with <code>[data-ogsc]<\/code> it might not work.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Make sure you wrap both the light mode and the dark mode images in an &lt;a&gt;. If they\u2019re not linked the swap doesn\u2019t usually happen.<\/span><\/p>\n<h4 id=\"debug\"><span style=\"font-weight: 400;\">How do I debug CSS issues that only appear in Dark Mode on specific devices?<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Litmus. Focus on the specific device where you\u2019re experiencing the issue to avoid running unnecessary previews across all devices and clients. If the client is Apple Mail or iOS, you can use the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/help.litmus.com\/article\/617-dark-mode-builder\"><span style=\"font-weight: 400;\">Dark Mode toggle<\/span><\/a><span style=\"font-weight: 400;\"> in Litmus to approximate what the dark mode is before you run the preview on those clients.\u00a0<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_7e4f0c76873de8872898a9a3dc3b0f78\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Master Dark Mode email with our toolkit<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Design better emails with our Dark Mode Toolkit. Get the guide, code snippets, and a template to level up your email game.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/the-dark-mode-toolkit\">\n\t\t\t\t\t\tDownload toolkit\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_ad1016e3194217bb2705c96adcb0a0f4\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h2 id=\"tips\"><span style=\"font-weight: 400;\">\ud83d\udd25 LitTips: advanced developer tips from Carin Slater<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Maintenance and version control<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Set up an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-testing-and-qa\"><span style=\"font-weight: 400;\">email QA<\/span><\/a><span style=\"font-weight: 400;\"> cycle to make sure to address any issues that come up. This process should include running a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"><span style=\"font-weight: 400;\">Litmus Test<\/span><\/a><span style=\"font-weight: 400;\"> for every email you send, plus regular review of email templates and campaigns to catch any discrepancies before they reach your audience.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Cementing your workflow<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When designing emails, Make sure your designers and developers are on the same page. Email developers can only do so much without the support of the design team.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When the imagery and design assets are handed off to code, there should be desktop, mobile, <\/span><i><span style=\"font-weight: 400;\">and<\/span><\/i><span style=\"font-weight: 400;\"> Dark Mode versions of the design, so the email developer knows what the end goal is.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you have an email style guide, make sure there are standards set up for the different versions of Dark Mode so everyone knows what to expect.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How to conquer coding emails for Dark Mode\u2026<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Still struggling with Dark Mode? Be sure to download out our complete<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/the-dark-mode-toolkit\/\"> <span style=\"font-weight: 400;\">Dark Mode Toolkit<\/span><\/a><span style=\"font-weight: 400;\"> as well as our NEW<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/new-dark-mode-visual-impairment\/\"> <span style=\"font-weight: 400;\">Dark Mode Coding Experience<\/span><\/a><span style=\"font-weight: 400;\">, now available in Litmus Builder. And if that doesn\u2019t do the trick\u2014we\u2019re always available at <a rel=\"noopener\" target=\"_blank\" href=\"mailto:hello@litmus.com\">hello@litmus.com<\/a><\/span><span style=\"font-weight: 400;\">. Please reach out; we\u2019d love to help!<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Emails that wow, built with ease<\/p>\n\t\t\t\t<p>Drag-and-drop or code from scratch. Sync with your ESP and test in one click. Build emails your way. Ready to build better?\n<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-analytics\" class=\"text-white text-decoration-none\">Book a demo<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Read this simple \u201cuser\u2019s manual\u201d for how to code emails for Dark Mode.<\/p>\n","protected":false},"author":54,"featured_media":68287,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[809,10272,10351,106],"blog_category":[10300,10303],"class_list":["post-68686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-dark-mode","tag-developer","tag-email-design","tag-gmail","blog_category-email-building","blog_category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20+ Developer Tips for Coding for Dark Mode - Litmus<\/title>\n<meta name=\"description\" content=\"Explore a developer&#039;s guide to coding emails for Dark Mode. Get expert tips, CSS techniques, technical FAQs, troubleshooting advice and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Developer&#039;s Technical Guide to Coding Dark Mode Emails\" \/>\n<meta property=\"og:description\" content=\"Explore a developer&#039;s guide to coding emails for Dark Mode. Get expert tips, CSS techniques, technical FAQs, troubleshooting advice and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-23T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-24T22:18:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/Email-Developers-Dark-Mode.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20+ Developer Tips for Coding for Dark Mode - Litmus","description":"Explore a developer's guide to coding emails for Dark Mode. Get expert tips, CSS techniques, technical FAQs, troubleshooting advice and more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode","og_locale":"en_US","og_type":"article","og_title":"The Developer's Technical Guide to Coding Dark Mode Emails","og_description":"Explore a developer's guide to coding emails for Dark Mode. Get expert tips, CSS techniques, technical FAQs, troubleshooting advice and more.","og_url":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2024-10-23T22:00:00+00:00","article_modified_time":"2024-10-24T22:18:49+00:00","og_image":[{"width":1380,"height":733,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/Email-Developers-Dark-Mode.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode"},"author":{"name":"","@id":""},"headline":"The Developer&#8217;s Technical Guide to Coding Dark Mode Emails","datePublished":"2024-10-23T22:00:00+00:00","dateModified":"2024-10-24T22:18:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode"},"wordCount":10,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/Email-Developers-Dark-Mode.jpg","keywords":["Dark Mode","Developer","Email Design","Gmail"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode","url":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode","name":"20+ Developer Tips for Coding for Dark Mode - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/Email-Developers-Dark-Mode.jpg","datePublished":"2024-10-23T22:00:00+00:00","dateModified":"2024-10-24T22:18:49+00:00","description":"Explore a developer's guide to coding emails for Dark Mode. Get expert tips, CSS techniques, technical FAQs, troubleshooting advice and more.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/Email-Developers-Dark-Mode.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/04\/Email-Developers-Dark-Mode.jpg","width":1380,"height":733,"caption":"How to Conquer Coding Emails for Dark Mode: A Guide For Email Developers blog header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The Developer&#8217;s Technical Guide to Coding Dark Mode Emails"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/68686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=68686"}],"version-history":[{"count":14,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/68686\/revisions"}],"predecessor-version":[{"id":105288,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/68686\/revisions\/105288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/68287"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=68686"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=68686"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=68686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}