{"id":3739,"date":"2025-02-27T16:25:49","date_gmt":"2025-02-27T21:25:49","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/"},"modified":"2026-03-20T12:40:14","modified_gmt":"2026-03-20T16:40:14","slug":"the-ultimate-guide-to-dark-mode-for-email-marketers","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers","title":{"rendered":"Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]"},"content":{"rendered":"<section>\r\n    <div class=\"container\">\r\n        <div class=\"row\">\r\n            <div class=\"col-12 col-lg-3 order-2\">\r\n<div id=\"getting-started-nav\" class=\"sticky-top mb-5 mb-lg-0\">\r\n      <ul class=\"nav flex-column nav-pills menu-sidebar\">\r\n\t\t  <li class=\"nav-item\">\r\n          <a class=\"nav-link nav-link-top\" rel=\"noopener\" href=\"#section-1\">Part 1: Ultimate Guide to Dark Mode in Email<\/a>\r\n\t\t  <\/li>\r\n\t\t  \t\t  <li class=\"nav-item\">\r\n          <a class=\"nav-link nav-link-top\" rel=\"noopener\" href=\"#section-2\">Part 2: Dark Mode Email Code Snippets for Developers<\/a>\r\n\t\t  <\/li>\r\n\t\t  \t\t  <li class=\"nav-item\">\r\n          <a class=\"nav-link nav-link-top\" rel=\"noopener\" href=\"#section-3\">Part 3: Dark Mode Tools &amp; Tips<\/a>\r\n\t\t  <\/li> \r\n      <\/ul>\r\n    <\/div>\r\n            <\/div>\r\n    <!-- Scrollspy -->\r\n<script type=\"text\/javascript\">\r\n\tjQuery(document).ready(\r\n\t\tfunction normalizeStickySidebar() {\r\n\t\t\t$('body').scrollspy({target:'#getting-started-nav', offset:290});\r\n  });\r\n\r\n           <\/script>\r\n\r\n<div class=\"col-12 col-lg-9\">\r\n    <h3>Key Takeaways<\/h3>\r\n    <ul>\r\n        <li>Dark Mode in email enhances readability and user experience by reducing eye strain and saving battery life, making it a crucial design consideration for modern email marketing.<\/li>\r\n        <li>Email clients apply Dark Mode differently, with some inverting colors completely while others make partial adjustments\u2014understanding these variations helps ensure consistent branding and design.<\/li>\r\n        <li>Optimizing emails for Dark Mode requires strategic coding techniques, such as using @media (prefers-color-scheme: dark), custom color overrides, and Dark Mode-specific image adjustments to maintain visual appeal.<\/li>\r\n        <li>Dark Mode impacts accessibility, benefiting some users while posing challenges for others\u2014following best practices like contrast optimization ensures emails remain inclusive and readable.<\/li>\r\n    <\/ul>\r\n    <p>Dark Mode. The tech industry started buzzing with these two words back when Apple added Dark Mode to its <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/email-designers-next-challenge-apple-dark-mode\">desktop email client<\/a> in 2018. The following year, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ios-13-apples-new-iphones-heres-what-email-marketers-must-know\">Dark Mode came to iOS Mail<\/a> and other industry heavyweights, including Gmail, announced support for Dark Mode.<\/p>\r\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-client-market-share-infographic\">Litmus&rsquo; Email Client Market Share<\/a> indicates that of the opens tracked, an average of 35% used Dark Mode in 2022, representing steady adoption year over year.<\/p>\r\n<p>Dark Mode has solidified its rightful place in the inbox\u2014but making sure emails look great in this reading environment can be a big challenge for email marketers.<\/p>\r\n<p>Consider this your all-in-one hub to all things Dark Mode, including Dark Mode code and hacks developed by Litmus and the email community, and a list of helpful Dark Mode tools email geeks trust and use often.<\/p>\r\n    \r\n<h2 id=\"section-1\"><strong>Part 1:<\/strong> Ultimate Guide to Dark Mode in Email<\/h2>\r\n\t<h3>What Dark Mode is and why people use it<\/h3>\r\n\t<p>Dark mode is a darker color palette for low-light or nighttime environments. This reversed color scheme uses light-colored typography, UI elements, and icons on dark backgrounds\u2014and it&rsquo;s one of the hottest digital<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/2022-email-design-trends-webinar-recording-qa\/\" target=\"_blank\" rel=\"noopener\"> design trends<\/a> in recent years. From Apple&rsquo;s OS to apps like Twitter, Slack, or Facebook Messenger, most popular operating systems and apps now allow users to switch to Dark Mode.<\/p>\r\n    <p>Dark Mode is a hot topic\u2014and for good reason. Many people prefer Dark Mode because:<\/p>\r\n    <ul>\r\n      <li aria-level=\"1\">It&rsquo;s easier on the eyes. Light text on a dark background is much better for minimizing eye strain, especially in low-light situations.<\/li>\r\n      <li aria-level=\"1\">It reduces screen brightness, saving your battery life.<\/li>\r\n      <li aria-level=\"1\">It can improve content legibility and can make it easier for some users to consume content on desktop and mobile.<\/li>\r\n    <\/ul>\r\n<p>They may simply have a preference for darker interfaces.<\/p>\r\n\t<h3>How are clients applying Dark Mode to my emails?<\/h3>\r\n\t<p>At the moment, there appear to be three fundamentally different types of color schemes that email clients use to apply Dark Mode to emails. Let&rsquo;s look at them one by one (or<a rel=\"noopener\" href=\"#chart\"> jump straight to the Dark Mode Email Client Support Chart<\/a>).<\/p>\r\n    <h4>No color changes<\/h4>\r\n    <p>Yes, you read right. Some email clients let you change their UI to Dark Mode, but that doesn&rsquo;t have any impact on how your HTML email is rendered. Whether the app is set to Light or Dark Mode, your email will look exactly the same. Here&rsquo;s a list of those clients:<\/p>\r\n    <ul>\r\n      <li aria-level=\"1\">Apple Mail*<\/li>\r\n      <li aria-level=\"1\">Gmail Desktop<\/li>\r\n      <li aria-level=\"1\">AOL<\/li>\r\n      <li aria-level=\"1\">Yahoo mail<\/li>\r\n    <\/ul>\r\n    <p>*Doesn&#8217;t change color modes if you leave out the Dark Mode meta tags. If you include the Dark Mode meta tags but don&#8217;t put any styles in, they give you a partial invert.<\/p>\r\n    <p>Check out this email example in Apple Mail: The design of the email stays exactly the same, no matter if you view it in the dark or light email client UI:<\/p>\r\n    <p>Apple Mail has a few exceptions to this: First, plain text emails do trigger the application of a Dark Mode theme, and the minimum code that blocks Dark Mode from applying to a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/best-practices-for-plain-text-emails-a-look-at-why-theyre-important\/\">plain text email<\/a> is a 2\u00d71 image\u2014this is to ensure that you can include a 1\u00d71 tracking pixel while retaining a &ldquo;plain text&rdquo; feel.<\/p>\r\n    <p>Secondly, If you enable Dark Mode as described below, then Apple Mail will auto convert your email to a Dark Mode Version using a partial invert (also described below).<\/p>\r\n    <h4>Dark Mode options: default vs. custom<\/h4>\r\n    <p>There are quite a few email clients that will automatically force their default Dark Mode onto your email if you don&rsquo;t do anything at all. But if you&rsquo;re like most of us and you&rsquo;re not a fan of these Default styles, you might want to go with the third option: design and code your own Dark Mode theme. Below, you can see a side-by-side of an email with a Light Mode theme, and a Custom Dark Mode theme.<\/p>\r\n    <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-example-749x1024.png\" alt=\"Creating a custom light mode themed email and a custom Dark Mode themed email\" width=\"749\" height=\"1024\" \/>\r\n    <p>Before we look into how to approach a custom Dark Mode theme though, let&rsquo;s check out how other email clients treat their Default Dark Modes.<\/p>\r\n    <h4>Default Dark Modes: partial color invert<\/h4>\r\n    <p>The first Dark Mode theme is what I like to call a &ldquo;Partial Color Invert&rdquo;. It only detects areas with light backgrounds and inverts them so the light backgrounds are dark, while the dark text becomes light.<\/p>\r\n    <p>It generally leaves areas that already have dark backgrounds alone, resulting in a fully Dark Mode design. Fortunately, most email clients that use this method also support Dark Mode targeting, so you can override the client-default dark theme.<\/p>\r\n    <p><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/outlook.com\/\" target=\"_blank\" rel=\"noopener\">Outlook.com<\/a> is an email client that partially inverts colors, like you can see in this screenshot:<\/p>\r\n    <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-partial-color-invert-example-749x1024.png\" alt=\"email side-by-side comparison\" width=\"749\" height=\"1024\" \/>\r\n    <h4>Default Dark Modes: full color invert<\/h4>\r\n    <p>The Full Color Invert is the most invasive color scheme: It not only inverts the areas with light backgrounds, but impacts dark backgrounds as well.<\/p>\r\n    <p>So if you already designed your emails to have a dark theme, this scheme will ironically force them to become light. Unfortunately, this is currently the tactic used by some of the more popular email clients, such as Gmail app (iOS), Outlook 2021 (Windows), Office 365 (Windows), and Windows Mail.<\/p>\r\n    <p>In the examples below, you can see the light backgrounds have been converted to dark versions of the original colors and areas that previously had a dark background with light text are now light with dark text.<\/p>\r\n    <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/litmus-light-mode-email-vs-dark-mode-email-full-color-invert-example-749x1024.png\" alt=\"Full color invert email example\" width=\"749\" height=\"1024\" \/>\r\n    <p>Not only does this Full Color Invert scheme most radically change your email, but the email clients that use this logic also don&rsquo;t allow Dark Mode targeting at the moment.<\/p>\r\n    <p>Email clients are still figuring out how to best implement Dark Mode and may be open to feedback from users\u2014especially since not allowing email developers to target Dark Mode with their own styles can have a negative impact on legibility and accessibility.<\/p>\r\n<p>In the interest of advocating for better Dark Mode targeting support and less invasive Dark Mode theming logic, you can<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/support.google.com\/accessibility\/contact\/feedback\" target=\"_blank\" rel=\"noopener\"> communicate your thoughts directly to Gmail&rsquo;s Accessibility team<\/a>, and you can also<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hteumeuleu\/email-bugs\/issues\/68\" target=\"_blank\" rel=\"noopener\"> contribute your screenshots of Gmail&rsquo;s Dark Mode breaking your email<\/a>.<\/p>\r\n   <h3>Different Dark Mode targeting methods<\/h3>\r\n   <p>As noted above, how email clients in Dark Mode handle your regular HTML emails will vary. But what if you&rsquo;d like to apply your own Dark Mode styles that could very well differ from email clients&rsquo; default color schemes? There are two methods you can use.<\/p>\r\n   <h4>@media (prefers-color-scheme: dark)<\/h4>\r\n   <p>This method works in very much the same way as applying a block of styles inside a @media query for your Mobile Responsive view, except this CSS block targets any user interface that&rsquo;s set to Dark Mode. @media (prefers-color-scheme: dark) allows you to create the most robust custom Dark Mode themes where you can implement anything from Dark Mode-specific image swaps, hover effects, background images\u2026 basically almost anything you can do with traditional CSS! This method requires you to add <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/264-dark-mode-meta-tags\" target=\"_blank\" rel=\"noopener\">Dark Mode meta tags and styles<\/a> to the &lt;head&gt; of your email in order to work in Apple Mail.<\/p>\r\n   <h4>[data-ogsc]\/[data-ogsb]<\/h4>\r\n   <p>This is a method first<a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402\" target=\"_blank\" rel=\"noopener\"> brought to our attention by Mark Robbins<\/a> to target the Outlook app. Not every style works with it, but it does work for image swapping on Outlook.com. While it seems like a pretty narrow market share, it&rsquo;s relatively easy to simply duplicate the @media (prefers-color-scheme: dark) styles you already applied and simply add the appropriate [data-ogsc] prefixes to each CSS rule.<\/p>\r\n   <h3>Which email clients support Dark Mode?<\/h3>\r\n   <p>These clients and apps currently offer Dark Mode\u2014either as a setting that the user can set manually or by automatically detecting the user&rsquo;s preferred color scheme:<\/p>\r\n   <h4>Mobile apps<\/h4>\r\n   <ul>\r\n     <li aria-level=\"1\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/what-ios-14-means-for-email-marketers\/\" target=\"_blank\" rel=\"noopener\">iPhone Mail<\/a><\/li>\r\n     <li aria-level=\"1\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/what-ios-14-means-for-email-marketers\/\" target=\"_blank\" rel=\"noopener\">iPad Mail<\/a><\/li>\r\n     <li aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.cnet.com\/how-to\/finallygmail-dark-mode-is-here-for-android-and-ios-phones-how-to-turn-it\/\" target=\"_blank\" rel=\"noopener\">Gmail App (Android)<\/a><\/li>\r\n     <li aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.cnet.com\/how-to\/finally-gmail-dark-mode-is-here-for-android-and-ios-phones-how-to-turn-it\/\" target=\"_blank\" rel=\"noopener\">Gmail App (iOS)<\/a><\/li>\r\n     <li aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.theverge.com\/2019\/8\/28\/20835008\/microsoft-outlook-ios-android-office-dark-mode-launch-ios-13\" target=\"_blank\" rel=\"noopener\">Outlook App (Android)<\/a><\/li>\r\n   <\/ul>\r\n   <h4>Desktop clients<\/h4>\r\n   <ul>\r\n     <li aria-level=\"1\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/email-designers-next-challenge-apple-dark-mode\" target=\"_blank\" rel=\"noopener\">Apple Mail<\/a><\/li>\r\n     <li aria-level=\"1\">Outlook 2021 (Mac OS)<\/li>\r\n     <li aria-level=\"1\">Outlook 2021 (Windows)<\/li>\r\n     <li aria-level=\"1\">Office365 (MacOS)<\/li>\r\n     <li aria-level=\"1\">Office365 (Windows)<\/li>\r\n     <li aria-level=\"1\">Windows Mail<\/li>\r\n   <\/ul>\r\n   <h4>Web clients<\/h4>\r\n   <ul>\r\n     <li aria-level=\"1\"><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/outlook.com\" target=\"_blank\" rel=\"noopener\">Outlook.com<\/a><\/li>\r\n   <\/ul>\r\n   <p>But just because all these email clients offer a way to set their UI to a dark color scheme, that doesn&rsquo;t mean that they handle your emails the same way. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/why-is-email-rendering-so-complex\" target=\"_blank\" rel=\"noopener\">Email rendering is complex<\/a>. An email that looks great in one client might look broken in another. Now, Dark Mode is adding another layer of complexity. As we&rsquo;ve already shown, there are various ways a Dark Mode email client might deal with your code.<\/p>\r\n   <p>And there&rsquo;s no consistent support for the different targeting methods either. So which email client follows which color scheme by default? While some offer email designers no opportunities to target Dark Mode to optimize the reading experience, several email clients can be targeted with either the @media (prefers-color-scheme: dark) or [data-ogsc] methods.<\/p>\r\n   <p>We&rsquo;ve tested the Dark Mode settings in the following email clients to see how they impact a regular email that doesn&rsquo;t include any Dark Mode-specific targeting as well as support for targeting Dark Mode. Here&rsquo;s what we found\u2026<\/p>\r\n   <h3>Email Dark Mode email client support chart (as of February 2025)<\/h3>\r\n<table id=\"chart\" class=\"table table-striped lh-sm\" style=\"text-align: center;\">\r\n<thead>\r\n<tr>\r\n<th scope=\"col\">Email Client<\/th>\r\n<th scope=\"col\">HTML Treatment in Dark Mode<\/th>\r\n<th scope=\"col\">@media support<\/th>\r\n<th scope=\"col\">[data\u2010ogsc] support<\/th>\r\n<th scope=\"col\"><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/267-override-dark-mode-background-colors-annett-forcier\" target=\"_blank\" rel=\"noopener\">Forced background color support<\/a>**<\/th>\r\n<th scope=\"col\">Quirks<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td style=\"text-align: left;\">Apple Mail (MacOS)<\/td>\r\n<td style=\"color: #0e9453;\">No change*<\/td>\r\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\r\n<td class=\"text-left\">*Pure white (#ffffff) BGs will be inverted if &lt;meta&gt; is present<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">iPhone \/ iPad (iOS 16)<\/td>\r\n<td style=\"color: #0e9453;\">No change*<\/td>\r\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\r\n<td style=\"text-align: left;\">*Pure white (#ffffff) BGs will be inverted if &lt;meta&gt; is present<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Outlook.com<\/td>\r\n<td style=\"color: #eeb35b;\">Partial invert<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #eeb35b;\">? Partial*\u2020<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"text-align: left;\">*Lighter BG colors will be darkened\r\n\u2020Image swap works if the image is linked<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Outlook 2021 (WinOS)<\/td>\r\n<td style=\"color: #ea7165;\">Full invert*<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td class=\"text-left\">*<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/how-to-fix-outlook-dark-mode-problems--cms-37718\">Special targeting<\/a> is possible for VML sections.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Outlook app (iOS)<\/td>\r\n<td style=\"color: #eeb35b;\">Partial invert<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #eeb35b;\">? Partial*\u2020<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td class=\"text-left\">*Lighter BG colors will be darkened and light fonts on a dark background may be darkened\r\n\u2020Image swap works if the image is linked<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Outlook app (Android)<\/td>\r\n<td style=\"color: #eeb35b;\">Partial invert<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #eeb35b;\">? Partial*\u2020<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td class=\"text-left\">*Lighter BG colors will be darkened and light fonts on a dark background may be darkened\r\n\u2020Image swap works if the image is linked<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Gmail app (iOS)<\/td>\r\n<td style=\"color: #ea7165;\">Full invert*<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\r\n<td class=\"text-left\">*<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.hteumeuleu.com\/2021\/fixing-gmail-dark-mode-css-blend-modes\/\">Special targeting<\/a> is possible for some colors and font colors!<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Gmail app (Android)<\/td>\r\n<td style=\"color: #eeb35b;\">Partial invert<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\r\n<td><\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Office 365 (Win)<\/td>\r\n<td style=\"color: #ea7165;\">Full invert<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td><\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Office 365 (mac)<\/td>\r\n<td style=\"color: #eeb35b;\">Partial invert<\/td>\r\n<td style=\"color: #eeb35b;\">? Partial*<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #0e9453;\">\u2713 Yes<\/td>\r\n<td class=\"text-left\">*Lighter BG colors will be darkened<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"text-left\">Windows Mail<\/td>\r\n<td style=\"color: #ea7165;\">Full invert<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td style=\"color: #ea7165;\">\u2718 No<\/td>\r\n<td><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\t<p>**Forcing the background color to stay the same color does not affect the font color and it will still invert. The only exception to this would be in clients that fully support @media or [data-ogsc]; or Gmail app where <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.hteumeuleu.com\/2021\/fixing-gmail-dark-mode-css-blend-modes\/\" target=\"_blank\" rel=\"noopener\">the color blend fix<\/a> works.<\/p>\r\n    <h4>Gmail iOS &amp; Outlook Windows-specific targeting<\/h4>\r\n    <p>Some #EmailGeeks out there have developed brilliant workarounds to control some of the Full Invert Default Themes we&rsquo;ve been battling with. Each of these solutions are so thorough, they warrant their own guides\u2014so be sure to check them out for a full explanation!<\/p>\r\n    <p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/HTeuMeuLeu\" target=\"_blank\" rel=\"noopener\">R\u00e9mi Parmentier<\/a> came up with a tutorial on<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.hteumeuleu.com\/2021\/fixing-gmail-dark-mode-css-blend-modes\/\" target=\"_blank\" rel=\"noopener\"> &ldquo;Fixing Gmail&rsquo;s Dark Mode issues with CSS Blend Modes&rdquo;<\/a> by combining mix-blend-mode and the Gmail hack from<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/howtotarget.email\/\" target=\"_blank\" rel=\"noopener\"> HowToTarget.email<\/a> to retain your original background and text colors for Gmail App iOS.<\/p>\r\n    <p>Nicole Merlin put her email wizardy to work in<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/how-to-fix-outlook-dark-mode-problems--cms-37718\" target=\"_blank\" rel=\"noopener\"> &ldquo;How To Fix Outlook Dark Mode Problems&rdquo;<\/a>, crafting two methods to target Outlook for Windows&rsquo; Dark Mode with MSO-specific gradient CSS properties and a really neat VML (Vector Markup Language) trick.<\/p>\r\n    <p>A word of caution when delving into these hacks, however: Because both of these methods have the intended effect of forcing the email client to render the original Light Mode text and\/or background colors where applied, you run the risk of disrespecting your users&rsquo; preference for Dark Mode which goes against the spirit of accessibility. Make sure to use these sparingly, like improving the contrast ratio when the backgrounds or text convert to Dark Mode in an unreadable manner.<\/p>\r\n<p>Though these targeting methods are relatively limited in comparison to what you can do with the @media (prefers-color-scheme: dark) or [data-ogsc] methods, they&rsquo;re still handy tools to have in case you need to fix problems with Dark Mode breaking your text legibility.<\/p>\r\n\t<h3>How to design and code for Dark Mode<\/h3>\r\n\t<p>When targeting Dark Mode styles across different email clients, be sure to follow each of these six steps to improve the Dark Mode email experience for your subscribers.<\/p>\r\n    <h4>1. Optimize your logos and other images for all styles<\/h4>\r\n    <p>Add a translucent outline to transparent PNGs with dark text for legibility in email clients where Dark Mode customization is more limited, like Gmail App and Outlook 2019 (Windows).<\/p>\r\n    <p>This will help prevent any issues where the email client might decide to use either the Partial Color Invert or Full Color Invert settings\u2014and make things easier on the eyes for your subscribers. Opting for transparent backgrounds wherever possible will help with this.<\/p>\r\n    <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/01-logos.png\" alt=\"Litmus Dark Mode email optimized logo example\" width=\"656\" height=\"540\" \/>\r\n    <p>You can even have fun with a Dark Mode-optimized logo!<\/p>\r\n    <p>Below is an example of a fake logo I made where I not only added a light drop-shadow behind the text to make it stand out against dark backgrounds, but I also incorporated a starry texture behind it to suit the &ldquo;NebulaCo&rdquo; galaxy theme.<\/p>\r\n    <div id=\"text-two-columns-block_617b00cf0e2bd\">\r\n      <div>\r\n        <div>\r\n          <div>\r\n            <div>\r\n              <div>\r\n                <table>\r\n                  <tbody>\r\n                    <tr>\r\n                      <td><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/02-logo-designy.png\" alt=\"Logo example for Dark Mode email\" width=\"624\" height=\"150\" \/><\/td>\r\n                    <\/tr>\r\n                  <\/tbody>\r\n                <\/table>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div>f\r\n            <div>\r\n              <div>\r\n                <table>\r\n                  <tbody>\r\n                    <tr>\r\n                      <td><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/02-logo-designy.png\" alt=\"Logo example for Dark Mode email\" width=\"624\" height=\"150\" class=\"background-black\" \/><\/td>\r\n                    <\/tr>\r\n                  <\/tbody>\r\n                <\/table>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div id=\"simple-text-block-block_617b00950e2bc\">\r\n      <div>\r\n        <div>\r\n          <div>\r\n            <div>\r\n              <p>Any light translucent element that you build into your logo will be invisible on Light Mode, serve as a defensive design tactic, and offers the opportunity to add a special branding touch that can only be seen in Dark Mode.<\/p>\r\n              <p>If your images are not transparent and include backgrounds, make sure there is enough padding around your focal point to avoid an awkward juxtaposition.<\/p>\r\n              <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/03-whitespace-e1635452309970.png\" sizes=\"(max-width: 558px) 100vw, 558px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/03-whitespace-e1635452309970.png 558w, https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/09\/03-whitespace-e1635452309970-300x226.png 300w\" alt=\"Image padding example in Dark Mode email\" width=\"558\" height=\"421\" \/>\r\n              <p>Plus, swap Light Mode and Dark Mode images with the @media (prefers-color-scheme: dark) and [data-ogsc] methods described below in this guide.<\/p>\r\n              <p>And this hot tip comes to those who are using <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-personalization\">Litmus Personalize<\/a> to create polls, where you can&rsquo;t create separate light and dark mode versions of the images. Here&rsquo;s how we&rsquo;ve tackled it when we include Litmus Personalize polls in our newsletters:<\/p>\r\n              <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/poll-1-1024x930.jpg\" alt=\"An image showing how Litmus Personalize polls render in both light and dark mode.\" width=\"1024\" height=\"930\" \/>\r\n              <h4>2. Enable Dark Mode in email client user agents<\/h4>\r\n              <p>By including this metadata in your &lt;head&gt; tag, you can ensure that Dark Mode is enabled in your email for subscribers that have Dark Mode turned on:<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div>\r\n      <pre title=\"\">&lt;meta name=\"color-scheme\" content=\"light dark\"&gt; &lt;meta name=\"supported-color-schemes\" content=\"light dark\"&gt; <\/pre>\r\n    <\/div>\r\n    <div id=\"simple-text-block-block_5f6267c4382da\">\r\n      <div>\r\n        <div>\r\n          <div>\r\n            <div>\r\n              <h4>3. Add Dark Mode styles for @media (prefers-color-scheme: dark)<\/h4>\r\n              <p>Add this Dark Mode media query in your embedded &lt;style&gt;&lt;\/style&gt; section for custom Dark Mode styles in iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS), and Outlook App (iOS).<\/p>\r\n              <p>The .dark-img and .light-img classes are particularly useful for showing a dark mode-specific logo if having an outlined logo isn&rsquo;t ideal.<\/p>\r\n              <p>Example CSS:<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div>\r\n      <pre title=\"\">@media (prefers-color-scheme: dark ) {   \/* Shows Dark Mode-Only Content, Like Images *\/   .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }       \/* Hides Light Mode-Only Content, Like Images *\/   .light-img { display:none; display:none !important; }       \/* Custom Dark Mode Background Color *\/   .darkmode { background-color: #272623 !important; }       \/* Custom Dark Mode Font Colors *\/   h1, h2, p, span, a, b { color: #ffffff !important; }       \/* Custom Dark Mode Text Link Color *\/   .link { color: #91ADD4 !important; } } <\/pre>\r\n    <\/div>\r\n    <div id=\"simple-text-block-block_5f6267e3382db\">\r\n      <div>\r\n        <div>\r\n          <div> \r\n            <div>\r\n              <h4>4. Duplicate Dark Mode styles with [data-ogsc] or [data-ogsb] prefix<\/h4>\r\n              <p>Add this styling for support in Outlook app (Android).<\/p>\r\n              <p>Example CSS:<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div>\r\n      <pre title=\"\">\/* Shows Dark Mode-Only Content, Like Images *\/ [data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }   \/* Hides Light Mode-Only Content, Like Images *\/ [data-ogsc] .light-img { display:none; display:none !important; }   \/* Custom Dark Mode Background Color *\/ [data-ogsc] .darkmode { background-color: #272623 !important; }   \/* Custom Dark Mode Font Colors *\/ [data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }   \/* Custom Dark Mode Text Link Color *\/ [data-ogsc] .link { color: #91ADD4 !important; } <\/pre>\r\n    <\/div>\r\n    <div id=\"simple-text-block-block_5f626805382dc\">\r\n      <div>\r\n        <div>\r\n          <div>\r\n            <div>\r\n              <h4>5. Apply your Dark Mode-only styles to your body HTML<\/h4>\r\n              <p>Make sure all of your HTML tags have the appropriate Dark Mode classes inserted. Here is an example of the .dark-img and .light-img classes as they appear in our Light Mode vs. Dark Mode logos.<\/p>\r\n              <p>Example HTML:<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div>\r\n      <pre title=\"\">&lt;!-- start HEADER_LOGO --&gt; &lt;a rel=\"noopener\" target=\"_blank\" rel=\"noopener\" target=\"_blank\" rel=\"noopener\" target=\"_blank\" href=\"http:\/\/litmus.com\/\" target=\"_blank\"&gt;       &lt;img class=\"light-img\" src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/images\/logo_icon-name-black.png\" width=\"163\" height=\"60\" alt=\"Litmus\" style=\"color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;\" border=\"0\" \/&gt;       &lt;!-- The following Dark Mode logo image is hidden     with MSO conditional code and inline CSS, but will be     \t     revealed once Dark Mode is triggered --&gt;       &lt;!--[if !mso]&gt;&lt;! --&gt;&lt;div class=\"dark-img\" style=\"display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;\" align=\"center\"&gt;           &lt;img src=\"https:\/\/campaigns.litmus.com\/_email\/_global\/images\/logo_icon-name-white.png\" width=\"163\" height=\"60\" alt=\"Litmus\" style=\"color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;\" border=\"0\" \/&gt;     &lt;\/div&gt;&lt;!--&lt;![endif]--&gt;   &lt;\/a&gt; &lt;!-- end HEADER_LOGO --&gt; <\/pre>\r\n    <\/div>\r\n    <div id=\"simple-text-block-block_5f626823382dd\">\r\n      <div>\r\n        <div>\r\n          <div>\r\n            <div>\r\n              <h4>6. ABT: Always Be Testing!<\/h4>\r\n              <p>As we always mention,<a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/how-often-do-email-apps-change-more-often-than-you-might-think\" target=\"_blank\" rel=\"noopener\"> email clients are constantly changing<\/a>. Especially with a feature like Dark Mode, tweaks to rendering logic are frequent. The only way to be on top of it all? Test every email and do <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-testing-and-qa\" target=\"_blank\" rel=\"noopener\">email QA<\/a> with a tool like<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener\"> Litmus<\/a>.<\/p>\n\n<div id=\"post-cta-buttonblock_32ab3cf792ae14dbd0916364ea011dc5\" 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=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/06\/add-to-calendar-icon2.svg\" alt=\"\" width=\"40\" height=\"40\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\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>Make Add-to-Calendar links a breeze with Litmus Personalize<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>In just a few clicks, you can create tailored subscriber experiences using proven personalization tactics such as add-to-calendar links, live polls, countdown timers and more.<\/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\/email-personalization\">\n\t\t\t\t\t\tLearn More\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<h2 class=\"mt-5\">Dark Mode image optimization<\/h2>\r\n<p>How can you make your image elements look great in Dark Mode, too? Here are essential tips and tricks for optimizing your imagery.<\/p>\r\n<h3>Designing your components<\/h3>\r\n<p>For your design components, you can go with a few stylistic options:<\/p>\r\n<table class=\"dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%\">\r\n<tbody>\r\n<tr>\r\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Light Mode<\/th>\r\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>\r\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>\r\n<\/tr>\r\n<tr>\r\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Controlled Dark Mode<\/th>\r\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>\r\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>\r\n<\/tr>\r\n<tr>\r\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode<\/th>\r\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>\r\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>\r\n<\/tr>\r\n<tr>\r\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with glow effect<\/th>\r\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>\r\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>\r\n<\/tr>\r\n<tr>\r\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with stroke effect<\/th>\r\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>\r\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>\r\n<\/tr>\r\n<tr>\r\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with shape outline<\/th>\r\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>\r\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>\r\n<\/tr>\r\n<tr>\r\n<th style=\"padding: 20px; text-align: left;\" scope=\"row\">Uncontrolled Dark Mode with background<\/th>\r\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>\r\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>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n<p>To decide the best approach, ask yourself:<\/p>\r\n<p>What matters most for this graphic\u2014maintaining its original look and feel or ensuring it appears transparent?<\/p>\r\n<ul>\r\n  <li aria-level=\"1\">\r\n    <p role=\"presentation\">If maintaining the look and feel is key: place the graphic on a background and flatten the image for consistency.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p role=\"presentation\">If transparency is the priority: add a glow or stroke to make the graphic stand out in Dark Mode.<\/p>\r\n  <\/li>\r\n<\/ul>\r\n<h3>Design techniques<\/h3>\r\n<h4>Technique 1: Design with midtones<\/h4>\r\n<p>One approach is to focus on midtones, while accounting for accessible contrast ratios.<\/p>\r\n<img decoding=\"async\" alt=\"examples of using midtones in Dark Mode email\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Screen-Shot-2023-05-22-at-5.25.28-PM.png\" width=\"351\" height=\"204\" \/>\r\n<p>When designing with midtones, use a color that has a high enough color contrast for both white and black because it falls toward the middle of the value range.<\/p>\r\n<h4>Technique 2: Use a glow or a stroke<\/h4>\r\n<p>A glow or solid white stroke around an icon or logo can also help with readability, but it depends on the type of image or icon.<\/p>\r\n<p>For transparent PNGs with dark text, adding a translucent glow works great.<\/p>\r\n<h4>Technique 3: Use a shape outline or background&nbsp;<\/h4>\r\n<p>Not a fan of a glow effects? You can put your icon on a background so it not only looks transparent on Light Mode but still works in Dark Mode where image swapping isn&rsquo;t supported.<\/p> \r\n<p>For stroke-based icons and illustrations, try adding a shape outline or background shapes behind them for a more visually appealing look.<\/p>\r\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/example-of-icons-in-Dark-Mode-showing-shape-outlines-and-a-background-e1684952219723.png\" width=\"724\" height=\"311\" alt=\"\">\r\n<h3>Using APNGs<\/h3>\r\n<p>When it comes to animated GIFs, opt for APNGs. Instead of using GIFs to add animation to your emails, try using Animated Portable Network Graphics (APNGs).<\/p>\r\n<p>GIFs don&rsquo;t support transparency well:<\/p>\r\n<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/image6.png\" alt=\"\" width=\"392\" height=\"145\">\r\n<p>White outlines can become pixelated due to a limited color range. On the other hand, APNGs generally do support transparency and have a wider color range.<\/p>\r\nInterested in giving animated APNGs a try? <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/animated-pngs-in-email-an-alternative-to-gifs\/\">We cover that here.<\/a> And give <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.fable.app\/\">Fable<\/a> a try for your next APNG! \r\n\r\n<h3 class=\"mt-5\">Respect user preferences when it comes to Dark Mode<\/h3>\r\n              <p>One of the biggest benefits of Dark Mode is its assistance with reducing eye strain for people in low-light conditions or for other personal reasons. But it&rsquo;s not a matter of<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/dark-mode-vs-light-mode-email-design\/\" target=\"_blank\" rel=\"noopener\"> Dark Mode vs. Light Mode<\/a>. It&rsquo;s a matter of what your subscribers want\u2014whether that&rsquo;s a dark or a light experience. There&rsquo;s no right or wrong answer.<\/p>\r\n              <p>So, if your subscribers are making the conscious decision to view emails in Dark Mode, it&rsquo;s best to respect that. Just like you&rsquo;d want to add ALT text in case your subscribers prefer to have images off by default, you should build emails that respect darker interfaces, too.<\/p>\r\n\r\n<h2>Dark Mode and email accessibility<\/h2>\r\n<p>As mentioned earlier, some email clients make Dark Mode inherently inaccessible. While many are working on improving this, some don&rsquo;t allow email developers to apply their own styles. Without proper implementation, this can negatively impact readability and accessibility.<\/p>\r\n<p>Let&rsquo;s dive into what that means in practice.<\/p>\r\n<h3>Is Dark Mode good or bad for accessibility?<\/h3>\r\n<p>Dark Mode can be both helpful and challenging for accessibility, depending on the individual user and how it&rsquo;s implemented.<\/p>\r\n<p>While it can improve readability for some, like individuals <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/dark-mode-users-issues\/\">with cataracts<\/a>, it can also introduce accessibility issues, including those with <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness\">color blindness<\/a> or <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.boia.org\/blog\/dark-mode-can-improve-text-readability-but-not-for-everyone\">dyslexia<\/a>. The key is to offer a choice to enable or disable Dark Mode and ensure proper color contrast in any mode.<\/p>\r\n<h3>Solving email accessibility challenges in Dark Mode<\/h3>\r\n<p>One major challenge with Dark Mode emails? There isn&rsquo;t just one version (as discussed earlier). A Dark Mode email can be rendered in three different ways:<\/p>\r\n<ol>\r\n  <li aria-level=\"1\">\r\n      <p><strong>No color changes:<\/strong> the email stays the same, regardless of the UI setting.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Partial color invert:<\/strong> light backgrounds are inverted to dark.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Full color invert:<\/strong> both light and dark backgrounds may be inverted.<\/p>\r\n  <\/li>\r\n<\/ol>\r\n<p>This lack of standardization means you can&rsquo;t fully control how your emails will appear to all subscribers. However, you can take steps to improve accessibility and readability.<\/p>\r\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-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">Accessibility made simple<\/p>\n\t\t\t\t<p>Creating accessible emails is no longer optional\u2014it\u2019s required. Learn about accessibility\u2019s impact on brands from two industry experts.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a href=\"https:\/\/www.litmus.com\/resources\/why-businesses-must-embrace-email-accessibility\" class=\"text-white text-decoration-none\">Watch now<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\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\r\n<h3>Best practices for designing accessible emails in Dark Mode<\/h3>\r\n<ul>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Ensure high contrast ratios.<\/strong> Make sure your text stands out against the background in both light and dark modes.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Choose accessible colors.<\/strong> Use color combinations that are easy to distinguish for people with color blindness.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Design with midtones for better visibility.<\/strong> Use a palette of mostly midtones to ensure contrast against both light and dark backgrounds.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Prioritize user choice.<\/strong> Allow subscribers to switch between light and dark modes whenever possible.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Aim to meet Web Content Accessibility Guidelines (WCAG) standards.<\/strong> At minimum, ensure your colors meet <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG2AA-Conformance\">WCAG Level AA<\/a> compliance. To ensure your emails can be read by all subscribers, aim for <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG2AAA-Conformance\">Level AAA<\/a>.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Use tools like <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAIM&rsquo;s Contrast Checker<\/a><\/strong> to evaluate color contrast.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Avoid thin fonts.<\/strong> Light text on dark backgrounds can impact readability, and by using a thin font you can make it harder for subscribers to read your email. If your brand requires a thin font, bold it in Dark Mode for better readability.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Skip pure white on pure black:<\/strong> A #FFFFFF (white) background on #000000 (black) can cause eye strain and might be automatically inverted by some email clients.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n    <p><strong>Test your email renderings.<\/strong> Since Dark Mode behaves differently in various email clients, preview your emails in multiple settings before sending. Run a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\">Litmus Test<\/a> to see how your email renders across 100+ clients and devices.<\/p>\r\n  <\/li>\r\n  <li aria-level=\"1\">\r\n      <p><strong>Use a tool to preview your Dark Mode emails as you build them.<\/strong> See changes in real time, easily optimize on the go, and quickly check for visual accessibility issues with the <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/new-dark-mode-visual-impairment\">Dark Mode coding experience in Litmus Builder<\/a>.<\/p>\r\n  <\/li>\r\n<\/ul>\r\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-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">Create emails that everyone can experience<\/p>\n\t\t\t\t<p>Maximize your email\u2019s impact by designing accessible content for all. Accessibility checks are always at your fingertips with Litmus.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a href=\"https:\/\/www.litmus.com\/email-builder\" class=\"text-white text-decoration-none\">Build Accessible Emails<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\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\r\n\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <hr>\r\n<h2 id=\"section-2\"><strong>Part 2:<\/strong> Dark Mode Email Code Snippets for Developers<\/h2>\r\n\t<h3>How to design and code for Dark Mode emails<\/h3>\r\n\t<p>Below are nine code snippets from the email community to help solve your biggest Dark Mode challenges.<\/p>\r\n    <table width=\"393\">\r\n      <tbody>\r\n        <tr>\r\n          <td>\u2702\ufe0f Click each image to get the code snippet!<\/td>\r\n        <\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n    <p>\u00a0<\/p>\r\n    <h3>Dark Mode meta tags<\/h3>\r\n    <div>\r\n      <dl id=\"attachment_58009\">\r\n        <dt><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/264-dark-mode-meta-tags\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Dark-Mode-meta-tags.jpg\" sizes=\"(max-width: 1200px) 100vw, 1200px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Dark-Mode-meta-tags.jpg 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Dark-Mode-meta-tags-300x158.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Dark-Mode-meta-tags-1024x538.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Dark-Mode-meta-tags-768x404.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Dark-Mode-meta-tags-700x368.jpg 700w\" alt=\"Dark Mode meta tags\" width=\"1200\" height=\"631\" \/><\/a><\/dt>\r\n        <dd><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/264-dark-mode-meta-tags\" target=\"_blank\" rel=\"noopener\">Get the code in Litmus Community \u2192<\/a><\/dd>\r\n      <\/dl>\r\n    <\/div>\r\n    <h3>Target Android\/Outlook.com for Dark Mode<\/h3>\r\n    <div>\r\n      <dl id=\"attachment_58012\">\r\n        <dt><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/266-target-android-outlook-com-for-dark-mode\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Dark-Mode-Snippet-AnfroudOutlook.jpg\" alt=\"\" width=\"1380\" height=\"726\" \/><\/a><\/dt>\r\n        <dd><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/266-target-android-outlook-com-for-dark-mode\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a><\/dd>\r\n      <\/dl>\r\n    <\/div>\r\n    <h3>Target Apple\/iOS for Dark Mode<\/h3>\r\n    <div>\r\n      <dl id=\"attachment_58013\">\r\n        <dt><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/265-target-apple-ios-for-dark-mode\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Target-Apple_iOS-for-Dark-Mode.jpg\" sizes=\"(max-width: 1200px) 100vw, 1200px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Target-Apple_iOS-for-Dark-Mode.jpg 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Target-Apple_iOS-for-Dark-Mode-300x158.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Target-Apple_iOS-for-Dark-Mode-1024x538.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Target-Apple_iOS-for-Dark-Mode-768x404.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Target-Apple_iOS-for-Dark-Mode-700x368.jpg 700w\" alt=\"Target Apple\/iOS for Dark Mode\" width=\"1200\" height=\"631\" \/><\/a><\/dt>\r\n        <dd><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/265-target-apple-ios-for-dark-mode\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a><\/dd>\r\n      <\/dl>\r\n    <\/div>\r\n    <h3>Override Dark Mode background colors<\/h3>\r\n    <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/267-override-dark-mode-background-colors-annett-forcier\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Override-Dark-Mode-background-colors.jpg\" sizes=\"(max-width: 1200px) 100vw, 1200px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Override-Dark-Mode-background-colors.jpg 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Override-Dark-Mode-background-colors-300x158.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Override-Dark-Mode-background-colors-1024x538.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Override-Dark-Mode-background-colors-768x404.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Override-Dark-Mode-background-colors-700x368.jpg 700w\" alt=\"Override Dark Mode background colors\" width=\"1200\" height=\"631\" \/><\/a> Credit: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/The_Annett\" target=\"_blank\" rel=\"noopener\">Annett Forcier<\/a>. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/267-override-dark-mode-background-colors-annett-forcier\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a>\r\n    <h3>Keep white text white in Gmail Dark Mode<\/h3>\r\n    <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/268-keeping-white-text-white-in-gmail-dark-mode-remi-parmentier\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-white-text-white-in-Gmail-Dark-Mode.jpg\" sizes=\"(max-width: 1200px) 100vw, 1200px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-white-text-white-in-Gmail-Dark-Mode.jpg 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-white-text-white-in-Gmail-Dark-Mode-300x158.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-white-text-white-in-Gmail-Dark-Mode-1024x538.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-white-text-white-in-Gmail-Dark-Mode-768x404.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-white-text-white-in-Gmail-Dark-Mode-700x368.jpg 700w\" alt=\"Keep white text white in Gmail Dark Mode\" width=\"1200\" height=\"631\" \/><\/a> Credit: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/HTeuMeuLeu\" target=\"_blank\" rel=\"noopener\">R\u00e9mi Parmentier<\/a>. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/268-keeping-white-text-white-in-gmail-dark-mode-remi-parmentier\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a>\r\n    <h3>Keep text the same color in Outlook&rsquo;s Dark Mode<\/h3>\r\n    <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/269-keep-text-the-same-color-in-outlook-s-dark-mode-nicole-merlin\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-text-the-same-color-in-Outlooks-Dark-Mode.jpg\" sizes=\"(max-width: 1200px) 100vw, 1200px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-text-the-same-color-in-Outlooks-Dark-Mode.jpg 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-text-the-same-color-in-Outlooks-Dark-Mode-227x300.jpg 227w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-text-the-same-color-in-Outlooks-Dark-Mode-774x1024.jpg 774w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-text-the-same-color-in-Outlooks-Dark-Mode-768x1016.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-text-the-same-color-in-Outlooks-Dark-Mode-1161x1536.jpg 1161w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Keep-text-the-same-color-in-Outlooks-Dark-Mode-700x926.jpg 700w\" alt=\"Keep text the same color in Outlook's Dark Mode\" width=\"1200\" height=\"1587\" \/><\/a> Credit: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/moonstrips?lang=en\" target=\"_blank\" rel=\"noopener\">Nicole Merlin<\/a>. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/269-keep-text-the-same-color-in-outlook-s-dark-mode-nicole-merlin\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a>\r\n    <h3>Show\/hide images for Dark Mode<\/h3>\r\n    <div>\r\n      <dl id=\"attachment_58019\">\r\n        <dt><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/270-show-hide-images-for-dark-mode\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Dark-Mode-ShowHide-Images.jpg\" alt=\"\" width=\"1380\" height=\"1059\" \/><\/a><\/dt>\r\n        <dd><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/270-show-hide-images-for-dark-mode\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a><\/dd>\r\n      <\/dl>\r\n    <\/div>\r\n    <h3>Fix VML button background colors for Dark Mode<\/h3>\r\n    <div>\r\n      <dl id=\"attachment_58020\">\r\n        <dt><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/271-fixing-vml-button-background-colors-for-dark-mode-wilbert-heinen\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Fix-VML-button-background-colors-for-Dark-Mode.jpg\" sizes=\"(max-width: 1200px) 100vw, 1200px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Fix-VML-button-background-colors-for-Dark-Mode.jpg 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Fix-VML-button-background-colors-for-Dark-Mode-300x158.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Fix-VML-button-background-colors-for-Dark-Mode-1024x538.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Fix-VML-button-background-colors-for-Dark-Mode-768x404.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Fix-VML-button-background-colors-for-Dark-Mode-700x368.jpg 700w\" alt=\"Fix VML button background colors for Dark Mode\" width=\"1200\" height=\"631\" \/><\/a><\/dt>\r\n        <dd>Credit to: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/wilbertheinen\" target=\"_blank\" rel=\"noopener\">Wilbert Heinen<\/a>. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/271-fixing-vml-button-background-colors-for-dark-mode-wilbert-heinen\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a><\/dd>\r\n      <\/dl>\r\n    <\/div>\r\n    <h3>Use off-white\/off-dark colors to prevent color changing in Dark Mode<\/h3>\r\n    <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Use-off-white_off-dark-colors-to-prevent-color-changing-in-Dark-Mode.jpg\" sizes=\"(max-width: 1200px) 100vw, 1200px\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Use-off-white_off-dark-colors-to-prevent-color-changing-in-Dark-Mode.jpg 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Use-off-white_off-dark-colors-to-prevent-color-changing-in-Dark-Mode-300x158.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Use-off-white_off-dark-colors-to-prevent-color-changing-in-Dark-Mode-1024x538.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Use-off-white_off-dark-colors-to-prevent-color-changing-in-Dark-Mode-768x404.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/12\/Use-off-white_off-dark-colors-to-prevent-color-changing-in-Dark-Mode-700x368.jpg 700w\" alt=\"Use off-white\/off-dark colors to prevent color changing in Dark Mode\" width=\"1200\" height=\"631\" \/> Credit: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/TedGoas\" target=\"_blank\" rel=\"noopener\">Ted Goas<\/a>\/<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/Paul_Airy\" target=\"_blank\" rel=\"noopener\">Paul Airy<\/a>. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/snippets\/272-use-off-white-off-dark-colors-to-prevent-color-changing-in-dark-mode-ted-goas-paul-airy\" target=\"_blank\" rel=\"noopener\">Grab the code in Litmus Community \u2192<\/a>\r\n    <hr>\r\n<h2 id=\"section-3\"><strong>Part 3:<\/strong> Dark Mode Tools &#038; Tips<\/h2>\r\n\t<h3>Email Community Favorite Email Dark Mode Tools &#038; Tips<\/h3>\r\n\t<p>What Dark Mode best practices, tools and resources do your fellow <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/email.geeks.chat\/\" target=\"_blank\" rel=\"noopener\">#EmailGeeks<\/a> rely on to learn more and overcome its challenges?<\/p>\r\n    <p>Check out this ever-growing list of external sources the email community recommends.<\/p>\r\n    <p>Is your favorite Dark Mode tool missing from this list? Let us know by emailing in to\u00a0<a rel=\"noopener\" target=\"_blank\" href=\"mailto:hello@litmus.com\" target=\"_blank\" rel=\"noopener\">hello@litmus.com<\/a>\u2014we want to make sure this list is valuable to all users, and current.<\/p>\r\n    <h3>1. To learn about Dark Mode in \u26a1AMP Email<\/h3>\r\n    <p>Dark Mode support isn&rsquo;t only needed for HTML emails, but also AMP-powered emails.<\/p>\r\n    <p>There&rsquo;s some bad news: there is currently no support for <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/coding-emails-for-dark-mode\">coding emails for Dark Mode<\/a> in AMP email. However, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/bendjang\">Benjamin Djang<\/a> has discovered an alternative solution to help your AMP Email look great in light and dark mode. <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/dev.to\/bdjang\/exploring-dark-mode-in-amp-email-5gm7\">Here&rsquo;s how<\/a>.<\/p>\r\n    <h3>2. Keep your text content as black text on a white background<\/h3>\r\n    <p>&ldquo;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.&rdquo;<\/p>\r\n    <p>Credit to: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/M_J_Robbins\" target=\"_blank\" rel=\"noopener\">Mark Robbins<\/a><\/p>\r\n    <h3>3. Set base styles for Dark Mode, update colors based on design<\/h3>\r\n    <p>Add these base styles to all of your boilerplate email templates to ensure that every single one of your emails will be Dark Mode ready, even if you forgot to set Dark Mode styles up, explicitly.<\/p>\r\n    <div>\r\n      <pre title=\"\">darkbg { background-color: black !important; }  .h1 { color: white !important; } .h2 { color: white !important; } .button { background-color: white !important; color: black !important; } <\/pre>\r\n    <\/div>\r\n<div id=\"simple-text-block-block_63a5fe6d765aa\">\r\n      <div>\r\n        <div>\r\n          <div>\r\n            <div>\r\n              <p>Credit to: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.twitter.com\/arizdesign\" target=\"_blank\" rel=\"noopener\">Emmanuel Arizmendi<\/a><\/p>\r\n              <h3>4. Resources for auto-inverse email clients<\/h3>\r\n              <p>Outlook and Gmail both fully invert the color scheme of your emails to support Dark Mode. Although we cannot target those clients, these awesome email geeks have some tips to help you make the most of these situations.<\/p>\r\n              <ul>\r\n                <li>@Outlook: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/how-to-fix-outlook-dark-mode-problems--cms-37718\" target=\"_blank\" rel=\"noopener\">https:\/\/webdesign.tutsplus.com\/tutorials\/how-to-fix-outlook-dark-mode-problems\u2013cms-37718<\/a><\/li>\r\n                <li>@Gmail: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/hteumeuleu.com\/2021\/fixing-gmail-dark-mode-css-blend-modes\/\" target=\"_blank\" rel=\"noopener\">https:\/\/hteumeuleu.com\/2021\/fixing-gmail-dark-mode-css-blend-modes\/<\/a><\/li>\r\n              <\/ul>\r\n              <p>Credit to: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.twitter.com\/arizdesign\" target=\"_blank\" rel=\"noopener\">Emmanuel Arizmendi<\/a><\/p>\r\n              <h3>5. To create an HTML email that reacts to Outlook.com&rsquo;s dark and light button<\/h3>\r\n              <p>A handy feature of Outlook.com is a light mode\/dark mode button, where users can manually select which version they would like to use to view emails in. Unfortunately, this handy feature comes with a drawback. Some users see the dark mode version of your email instead of the light mode version\u2014even if they have selected to view emails in Outlook.com in light mode.<\/p>\r\n              <p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.hteumeuleu.com\/2021\/emails-react-outlook-com-dark-mode\">Here are some tips to get around this issue<\/a>.<\/p> \r\n              <p>Credit to: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/HTeuMeuLeu\" target=\"_blank\" rel=\"noopener\">R\u00e9mi Parmentier<\/a> via <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/wilbertheinen\" target=\"_blank\" rel=\"noopener\">Wilbert Heinen<\/a><\/p>\r\n              <h3>6. How to fix Outlook Dark Mode problems<\/h3>\r\n              <p>Due to Microsoft Outlook&rsquo;s full invert, your subscribers might see unpredictable text color changes in Outlook. These changes can make your emails harder to read. Email developer, <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/how-to-fix-outlook-dark-mode-problems--cms-37718t\">Nicole Merlin, has a way around that<\/a>.<\/p>\r\n              <p>Credit to: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/moonstrips?lang=en\" target=\"_blank\" rel=\"noopener\">Nicole Merlin<\/a><\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n<p><em>Originally published by Alice Li in November, 2019.<\/em><\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <\/section>","protected":false},"excerpt":{"rendered":"<p>Read answers to FAQs around Dark Mode email, view code snippets, learn about different tools and tips, &#038; download an all-encompassing &#8220;Dark Mode email&#8221; toolkit! <\/p>\n","protected":false},"author":25,"featured_media":108660,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"templates\/content-single-toc.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[110,809,10351],"blog_category":[10303],"class_list":["post-3739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-apple","tag-dark-mode","tag-email-design","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>Dark Mode for Email: The Definitive Guide for Marketers<\/title>\n<meta name=\"description\" content=\"Read answers to FAQs around Dark Mode email, view code snippets, learn about best tools and tips, &amp; get an all-encompassing &quot;Dark Mode email&quot; toolkit!\" \/>\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\/the-ultimate-guide-to-dark-mode-for-email-marketers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]\" \/>\n<meta property=\"og:description\" content=\"Read answers to FAQs around Dark Mode email, view code snippets, learn about best tools and tips, &amp; get an all-encompassing &quot;Dark Mode email&quot; toolkit!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\" \/>\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=\"2025-02-27T21:25:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-20T16:40:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Ultimate-Guide-to-Dark-Mode_Refresh.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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":"Dark Mode for Email: The Definitive Guide for Marketers","description":"Read answers to FAQs around Dark Mode email, view code snippets, learn about best tools and tips, & get an all-encompassing \"Dark Mode email\" toolkit!","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\/the-ultimate-guide-to-dark-mode-for-email-marketers","og_locale":"en_US","og_type":"article","og_title":"Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]","og_description":"Read answers to FAQs around Dark Mode email, view code snippets, learn about best tools and tips, & get an all-encompassing \"Dark Mode email\" toolkit!","og_url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2025-02-27T21:25:49+00:00","article_modified_time":"2026-03-20T16:40:14+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Ultimate-Guide-to-Dark-Mode_Refresh.png","type":"image\/png"}],"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\/the-ultimate-guide-to-dark-mode-for-email-marketers#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers"},"author":{"name":"","@id":""},"headline":"Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]","datePublished":"2025-02-27T21:25:49+00:00","dateModified":"2026-03-20T16:40:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers"},"wordCount":13,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Ultimate-Guide-to-Dark-Mode_Refresh.png","keywords":["Apple","Dark Mode","Email Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers","url":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers","name":"Dark Mode for Email: The Definitive Guide for Marketers","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Ultimate-Guide-to-Dark-Mode_Refresh.png","datePublished":"2025-02-27T21:25:49+00:00","dateModified":"2026-03-20T16:40:14+00:00","description":"Read answers to FAQs around Dark Mode email, view code snippets, learn about best tools and tips, & get an all-encompassing \"Dark Mode email\" toolkit!","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Ultimate-Guide-to-Dark-Mode_Refresh.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/01\/Ultimate-Guide-to-Dark-Mode_Refresh.png","width":1380,"height":725,"caption":"icon of a sun, with a toggle to an icon of a moon\u2014representing Light Mode and Dark Mode"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]"}]},{"@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\/3739","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3739"}],"version-history":[{"count":26,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3739\/revisions"}],"predecessor-version":[{"id":123256,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3739\/revisions\/123256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/108660"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3739"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3739"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}