{"id":106467,"date":"2026-10-18T13:38:08","date_gmt":"2026-10-18T13:38:08","guid":{"rendered":"https:\/\/mailrelay.com\/glossary\/dark-mode\/"},"modified":"2026-10-18T13:38:14","modified_gmt":"2026-10-18T13:38:14","slug":"dark-mode","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/","title":{"rendered":"Dark mode"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Dark mode<\/em> is a display setting that shows light text on a black or dark gray background. Phones, computers, browsers and almost every email program offer it.<\/p>\n\n<p class=\"wp-block-paragraph\">For anyone doing email marketing, it has a direct consequence: your newsletter doesn&#8217;t always look the way you designed it.<\/p>\n\n<p class=\"wp-block-paragraph\">Depending on the email program, colors stay the same, are partly inverted or are fully inverted.<\/p>\n\n<p class=\"wp-block-paragraph\">Here you&#8217;ll see what each one does and how to design so your emails are easy to read with the lights off. At the end you&#8217;ll find <strong>8 dark mode templates<\/strong> ready to use in Mailrelay.<\/p>\n\n<h2 class=\"wp-block-heading\">What is dark mode and what is it for?<\/h2>\n\n<p class=\"wp-block-paragraph\">Dark mode inverts the usual color palette of the interface. Backgrounds become dark and text becomes light. It became popular in 2019, when iOS, Android and macOS added it as a system setting.<\/p>\n\n<p class=\"wp-block-paragraph\">People turn it on for three reasons:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual comfort:<\/strong> it&#8217;s easier on the eyes when reading at night or in low light.<\/li>\n\n\n\n<li><strong>Battery:<\/strong> on OLED screens, black pixels use almost no power.<\/li>\n\n\n\n<li><strong>Personal taste:<\/strong> many people find it more elegant.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">How many people use it for email? Litmus found that 35% of the opens it tracked in 2022 happened with dark mode turned on.<\/p>\n\n<p class=\"wp-block-paragraph\">That&#8217;s more than one in every three reads. It&#8217;s not something you can ignore when designing an <a href=\"https:\/\/mailrelay.com\/en\/glossary\/email-template\/\" target=\"_blank\" rel=\"noopener\">email template<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\">How does dark mode affect your emails?<\/h2>\n\n<p class=\"wp-block-paragraph\">Each email program applies it in its own way.<\/p>\n\n<p class=\"wp-block-paragraph\">It&#8217;s part of <a href=\"https:\/\/mailrelay.com\/en\/glossary\/email-rendering\/\" target=\"_blank\" rel=\"noopener\">email rendering<\/a>: the same HTML is displayed differently depending on where it&#8217;s opened. There are three behaviors:<\/p>\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Behavior<\/th><th>What it does to your email<\/th><th>Email clients (Litmus, February 2025)<\/th><\/tr><\/thead><tbody><tr><td>No changes<\/td><td>Keeps your colors; only darkens the program&#8217;s interface<\/td><td>Apple Mail on Mac, iPhone and iPad, Gmail on desktop, Yahoo Mail<\/td><\/tr><tr><td>Partial inversion<\/td><td>Darkens light backgrounds and lightens dark text; leaves anything already dark as it is<\/td><td>Outlook.com, Outlook app (iOS and Android), Gmail app on Android<\/td><\/tr><tr><td>Full inversion<\/td><td>Inverts all colors, including backgrounds that were already dark<\/td><td>Gmail app on iPhone, Outlook for Windows, Windows Mail<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<p class=\"wp-block-paragraph\">A note about Apple Mail. It respects your colors, but if the email doesn&#8217;t set a background color, it darkens that too.<\/p>\n\n<p class=\"wp-block-paragraph\">That&#8217;s why a plain text email looks dark on an iPhone with dark mode turned on.<\/p>\n\n<h3 class=\"wp-block-heading\">Dark mode in Gmail<\/h3>\n\n<p class=\"wp-block-paragraph\">The Gmail app behaves differently depending on the system: partial inversion on Android and full inversion on iPhone. On desktop, Gmail darkens its interface, but your email keeps its colors.<\/p>\n\n<p class=\"wp-block-paragraph\">Gmail doesn&#8217;t let you detect dark mode with code. Your only defense is a design that holds up well when inverted.<\/p>\n\n<h3 class=\"wp-block-heading\">Dark mode in Outlook<\/h3>\n\n<p class=\"wp-block-paragraph\">Outlook is the most unpredictable. Outlook.com and the mobile app do a partial inversion, and Outlook for Windows inverts all colors.<\/p>\n\n<p class=\"wp-block-paragraph\">Pay special attention to logos with a transparent background and buttons with dark text. They&#8217;re the first things to break.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg\" alt=\"The same email in dark mode in three email programs: no changes, partial inversion and full inversion\" class=\"wp-image-106131\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg 1024w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-300x169.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-768x432.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-110x62.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-60x34.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<div class=\"wp-block-group has-very-light-gray-background-color has-background\" style=\"border-radius:8px;padding-top:24px;padding-right:28px;padding-bottom:24px;padding-left:28px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Design emails that read well day and night<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create your campaigns with dark-mode-ready templates and send yourself tests before sending them out. Free for up to 80,000 emails a month.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-mailrelay-primary-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/mailrelay.com\/en\/signup\/?utm_medium=cta&#038;utm_campaign=modo-oscuro\">Create a free account<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">What are the pros and cons for email marketing?<\/h2>\n\n<p class=\"wp-block-paragraph\">The big advantage is that your email fits in with what the reader has chosen. An email that blinds them with white at midnight gets closed fast.<\/p>\n\n<p class=\"wp-block-paragraph\">One that blends into their dark screen gets read more calmly.<\/p>\n\n<p class=\"wp-block-paragraph\">But it has its risks.<\/p>\n\n<p class=\"wp-block-paragraph\">In a 2021 Mailjet survey, 31% of email professionals named automatic color inversion as a major problem. And a third were worried about their brand image.<\/p>\n\n<p class=\"wp-block-paragraph\">The typical failures are logos that disappear, gray text with no contrast and buttons that change color. And worst of all: you don&#8217;t decide when it happens.<\/p>\n\n<h2 class=\"wp-block-heading\">How do you design an email for dark mode?<\/h2>\n\n<p class=\"wp-block-paragraph\">You don&#8217;t need two versions of every campaign. All you need is a design that works in both modes:<\/p>\n\n<ol class=\"wp-block-list\">\n<li><strong>Use logos with an outline or their own background.<\/strong> A black <a href=\"https:\/\/mailrelay.com\/en\/glossary\/logo\/\" target=\"_blank\" rel=\"noopener\">logo<\/a> in a transparent PNG disappears on a dark background.<\/li>\n\n\n\n<li><strong>Avoid pure black and pure white.<\/strong>  A very dark gray (#1a1a1a) and an off-white hold up better to inversion.<\/li>\n\n\n\n<li><strong>Mind the contrast.<\/strong>  Check that every piece of text is readable in both modes. It&#8217;s also the foundation of an <a href=\"https:\/\/mailrelay.com\/en\/glossary\/accessible-email\/\" target=\"_blank\" rel=\"noopener\">accessible email<\/a>.<\/li>\n\n\n\n<li><strong>Don&#8217;t put text inside images.<\/strong>  HTML text adapts; text in an image doesn&#8217;t.<\/li>\n\n\n\n<li><strong>Give buttons their own background color.<\/strong> A <a href=\"https:\/\/mailrelay.com\/en\/glossary\/call-to-action-cta\/\" target=\"_blank\" rel=\"noopener\">call to action<\/a> with a colored background stays visible even if everything else is inverted.<\/li>\n\n\n\n<li><strong>Test before sending.<\/strong>  Send the email to yourself and open it in Gmail and Outlook with dark mode turned on.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">If you want to go further, Apple Mail supports the <strong>prefers-color-scheme<\/strong> media query so you can set your own dark colors. It only works in some clients, so use it as an enhancement, not as the foundation.<\/p>\n\n<h2 class=\"wp-block-heading\">Dark mode email templates available in Mailrelay<\/h2>\n\n<p class=\"wp-block-paragraph\">Another option is to start from a design that&#8217;s already dark. In the Mailrelay editor you&#8217;ll find dark background templates for every type of campaign.<\/p>\n\n<p class=\"wp-block-paragraph\">They&#8217;re designed so the logo, text and buttons don&#8217;t get lost. Here are eight of them, one per category.<\/p>\n\n<h3 class=\"wp-block-heading\">Basic: \u201cShort message\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">A text email, with no images, to communicate something specific: a change, a notice or a letter from management. It suits brands with a minimalist style.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve.jpg\" alt=\"Short text-only dark mode email template, with no images, from the Mailrelay editor\" class=\"wp-image-106139\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-mensaje-breve-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201cShort message\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Newsletters: \u201cDark weekly digest\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">A content <a href=\"https:\/\/mailrelay.com\/en\/glossary\/newsletter\/\" target=\"_blank\" rel=\"noopener\">newsletter<\/a> with a main image, featured articles and links to keep reading. Designed for the digest your readers open at night.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal.jpg\" alt=\"Dark mode weekly newsletter template with featured articles from the Mailrelay editor\" class=\"wp-image-106143\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-resumen-semanal-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201cDark weekly digest\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Welcome: \u201cWelcome with checklist\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">A <a href=\"https:\/\/mailrelay.com\/en\/glossary\/welcome-email\/\" target=\"_blank\" rel=\"noopener\">welcome email<\/a> with a progress bar and a list of steps to get started. Useful for software and services that require sign-up.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist.jpg\" alt=\"Dark mode welcome email template with a progress bar and a list of steps from the Mailrelay editor\" class=\"wp-image-106147\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-bienvenida-checklist-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201cWelcome with checklist\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Announcement: \u201cPremium product launch\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">A large product photo and three key figures: battery life, colors and price. The black background makes the image stand out. Ideal for tech, fashion or cosmetics.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto.jpg\" alt=\"Dark mode product launch template with a photo and key figures from the Mailrelay editor\" class=\"wp-image-106151\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-lanzamiento-producto-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201cPremium product launch\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Catalog: \u201cDark product catalog\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">A product grid with photo, name, price and link. Use it to present a seasonal collection or what&#8217;s new in your online store.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos.jpg\" alt=\"Dark mode product catalog template with a product grid from the Mailrelay editor\" class=\"wp-image-106155\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-catalogo-productos-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201cDark product catalog\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Offers: \u201c24-hour flash sale\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">A big discount in red, a clear button and a \u201c24 hours only\u201d notice. The contrast with the dark background reinforces the urgency of <a href=\"https:\/\/mailrelay.com\/en\/glossary\/flash-sales\/\" target=\"_blank\" rel=\"noopener\">flash sales<\/a>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago.jpg\" alt=\"Dark mode 24-hour flash sale template with a 40% discount from the Mailrelay editor\" class=\"wp-image-106159\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-oferta-relampago-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201c24-hour flash sale\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Ecommerce: \u201cDark order confirmation\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">A <a href=\"https:\/\/mailrelay.com\/en\/glossary\/confirmation-email-2\/\" target=\"_blank\" rel=\"noopener\">confirmation email<\/a> with the order summary, the total, the shipping status and the address. It keeps your style after the purchase.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido.jpg\" alt=\"Dark mode order confirmation template with a purchase summary from the Mailrelay editor\" class=\"wp-image-106163\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-confirmacion-pedido-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201cDark order confirmation\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Events: \u201cNight event invitation\u201d<\/h3>\n\n<p class=\"wp-block-paragraph\">An <a href=\"https:\/\/mailrelay.com\/en\/glossary\/event-invitation\/\" target=\"_blank\" rel=\"noopener\">event invitation<\/a> with photo, date, time, venue and entry code. It sets the mood for a dinner, a concert or a New Year&#8217;s Eve party.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento.jpg\" alt=\"Dark mode night event invitation template from the Mailrelay editor\" class=\"wp-image-106167\" style=\"width:420px;height:auto\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento.jpg 1000w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento-300x300.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento-150x150.jpg 150w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento-768x768.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento-110x110.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento-60x60.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/plantilla-modo-oscuro-invitacion-evento-120x120.jpg 120w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">\u201cNight event invitation\u201d template from the Mailrelay editor, also available on the free account.<\/figcaption><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">They&#8217;re all edited with drag and drop, without touching the HTML. Change colors, text and images and save it as your own template.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-checklist-email-1024x576.jpg\" alt=\"Six-point checklist for designing an email that looks good in dark mode\" class=\"wp-image-106135\" srcset=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-checklist-email-1024x576.jpg 1024w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-checklist-email-300x169.jpg 300w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-checklist-email-768x432.jpg 768w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-checklist-email-110x62.jpg 110w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-checklist-email-60x34.jpg 60w, https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-checklist-email.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">How does Mailrelay help you with dark mode?<\/h2>\n\n<p class=\"wp-block-paragraph\">With Mailrelay you create your campaigns in a visual editor with hundreds of templates, including the eight dark ones you&#8217;ve just seen.<\/p>\n\n<p class=\"wp-block-paragraph\">You can send yourself tests to check the design in Gmail, Outlook or on mobile before sending. Can&#8217;t decide between a light and a dark version? Run an <a href=\"https:\/\/mailrelay.com\/en\/glossary\/a-b-testing\/\" target=\"_blank\" rel=\"noopener\">A\/B test<\/a> and let the data decide.<\/p>\n\n<p class=\"wp-block-paragraph\">It&#8217;s all included in the free account: up to 80,000 emails a month and 20,000 contacts, with chat, ticket and phone support.<\/p>\n\n<p class=\"wp-block-paragraph\">See the rest of <a href=\"https:\/\/mailrelay.com\/en\/glossary\/mailrelay-features\/\" target=\"_blank\" rel=\"noopener\">Mailrelay&#8217;s features<\/a>.<\/p>\n\n<div class=\"wp-block-group has-very-light-gray-background-color has-background\" style=\"border-radius:8px;padding-top:24px;padding-right:28px;padding-bottom:24px;padding-left:28px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Try the dark templates for free<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose one of the eight templates, change the text and images and send it to your list from your free Mailrelay account.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-mailrelay-primary-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/mailrelay.com\/en\/signup\/?utm_medium=cta&#038;utm_campaign=modo-oscuro\">Try Mailrelay for free<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">Dark mode FAQs<\/h2>\n\n<p class=\"wp-block-paragraph\">These are the most common questions about dark mode in email.<\/p>\n\n<h3 class=\"wp-block-heading\">What is dark mode?<\/h3>\n\n<p class=\"wp-block-paragraph\">It&#8217;s a display setting that shows light text on a dark background. Operating systems, browsers and email programs offer it. People use it to reduce eye strain, save battery on OLED screens or simply out of personal preference.<\/p>\n\n<h3 class=\"wp-block-heading\">How do you turn on dark mode in Gmail?<\/h3>\n\n<p class=\"wp-block-paragraph\">In the app, go to Settings and choose Theme or Dark. On desktop, go to Settings, open Themes and choose a dark one. There, Gmail only darkens its interface, not the content of the emails.<\/p>\n\n<h3 class=\"wp-block-heading\">How do you turn on dark mode in Outlook?<\/h3>\n\n<p class=\"wp-block-paragraph\">In Outlook.com, open Settings and turn on dark mode under appearance. In Outlook for Windows, change it in Office Account, under Office Theme. On mobile, Outlook usually follows the system setting.<\/p>\n\n<h3 class=\"wp-block-heading\">Is it better to send emails with a dark background?<\/h3>\n\n<p class=\"wp-block-paragraph\">There is no single answer. A dark background suits tech, fashion, leisure or event brands. But some email clients invert it. Try it and measure the results with an A\/B test.<\/p>\n\n<h3 class=\"wp-block-heading\">Does Mailrelay have dark mode templates?<\/h3>\n\n<p class=\"wp-block-paragraph\">Yes. The Mailrelay editor includes dark templates in the Basic, Newsletters, Welcome, Announcement, Catalog, Offers, Ecommerce and Events categories. They&#8217;re also available on the free account.<\/p>\n\n<h2 class=\"wp-block-heading\">Related entries<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/mailrelay.com\/en\/glossary\/email-template\/\">Email template<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mailrelay.com\/en\/glossary\/email-rendering\/\">Email rendering<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mailrelay.com\/en\/glossary\/accessible-email\/\">Accessible email<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mailrelay.com\/en\/glossary\/responsive-email\/\">Responsive email<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mailrelay.com\/en\/glossary\/modular-email-design\/\">Modular email design<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mailrelay.com\/en\/glossary\/webmail-client\/\">Webmail client<\/a><\/li>\n<\/ul>\n","protected":false},"template":"","class_list":["post-106467","glossary","type-glossary","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dark mode in email: what it is and how to design for it<\/title>\n<meta name=\"description\" content=\"What dark mode is, how it changes your emails in Gmail, Outlook and Apple Mail, and how to design for it. Plus 8 free dark templates in Mailrelay.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dark mode in email: what it is and how to design for it\" \/>\n<meta property=\"og:description\" content=\"What dark mode is, how it changes your emails in Gmail, Outlook and Apple Mail, and how to design for it. Plus 8 free dark templates in Mailrelay.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/\" \/>\n<meta property=\"og:site_name\" content=\"Mailrelay\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Mailrelay\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-18T13:38:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@mailrelay\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/\",\"name\":\"Dark mode in email: what it is and how to design for it\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg\",\"datePublished\":\"2026-10-18T13:38:08+00:00\",\"dateModified\":\"2026-10-18T13:38:14+00:00\",\"description\":\"What dark mode is, how it changes your emails in Gmail, Outlook and Apple Mail, and how to design for it. Plus 8 free dark templates in Mailrelay.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/#primaryimage\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg\",\"contentUrl\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/glossary\\\/dark-mode\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dark mode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/\",\"name\":\"Mailrelay\",\"description\":\"Mailrelay.com - Email Marketing Software\",\"publisher\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#organization\",\"name\":\"Mailrelay\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/mailrelay-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/mailrelay.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/mailrelay-logo.jpg\",\"width\":613,\"height\":291,\"caption\":\"Mailrelay\"},\"image\":{\"@id\":\"https:\\\/\\\/mailrelay.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Mailrelay\\\/\",\"https:\\\/\\\/x.com\\\/mailrelay\",\"https:\\\/\\\/www.youtube.com\\\/mailrelay-email-marketing\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dark mode in email: what it is and how to design for it","description":"What dark mode is, how it changes your emails in Gmail, Outlook and Apple Mail, and how to design for it. Plus 8 free dark templates in Mailrelay.","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:\/\/mailrelay.com\/en\/glossary\/dark-mode\/","og_locale":"en_US","og_type":"article","og_title":"Dark mode in email: what it is and how to design for it","og_description":"What dark mode is, how it changes your emails in Gmail, Outlook and Apple Mail, and how to design for it. Plus 8 free dark templates in Mailrelay.","og_url":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/","og_site_name":"Mailrelay","article_publisher":"https:\/\/www.facebook.com\/Mailrelay\/","article_modified_time":"2026-10-18T13:38:14+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@mailrelay","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/","url":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/","name":"Dark mode in email: what it is and how to design for it","isPartOf":{"@id":"https:\/\/mailrelay.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/#primaryimage"},"image":{"@id":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg","datePublished":"2026-10-18T13:38:08+00:00","dateModified":"2026-10-18T13:38:14+00:00","description":"What dark mode is, how it changes your emails in Gmail, Outlook and Apple Mail, and how to design for it. Plus 8 free dark templates in Mailrelay.","breadcrumb":{"@id":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/#primaryimage","url":"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg","contentUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2026\/10\/modo-oscuro-mismo-email-tres-clientes-1024x576.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/mailrelay.com\/en\/glossary\/dark-mode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mailrelay.com\/en\/"},{"@type":"ListItem","position":2,"name":"Dark mode"}]},{"@type":"WebSite","@id":"https:\/\/mailrelay.com\/en\/#website","url":"https:\/\/mailrelay.com\/en\/","name":"Mailrelay","description":"Mailrelay.com - Email Marketing Software","publisher":{"@id":"https:\/\/mailrelay.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mailrelay.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/mailrelay.com\/en\/#organization","name":"Mailrelay","url":"https:\/\/mailrelay.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mailrelay.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg","contentUrl":"https:\/\/mailrelay.com\/wp-content\/uploads\/2019\/05\/mailrelay-logo.jpg","width":613,"height":291,"caption":"Mailrelay"},"image":{"@id":"https:\/\/mailrelay.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Mailrelay\/","https:\/\/x.com\/mailrelay","https:\/\/www.youtube.com\/mailrelay-email-marketing"]}]}},"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Jose Argudo","author_link":"https:\/\/mailrelay.com\/en\/blog\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Dark mode is a display setting that shows light text on a black or dark gray background. Phones, computers, browsers and almost every email program offer it. For anyone doing email marketing, it has a direct consequence: your newsletter doesn&#8217;t always look the way you designed it. Depending on the email program, colors stay the&hellip;","_links":{"self":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/glossary\/106467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/types\/glossary"}],"version-history":[{"count":2,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/glossary\/106467\/revisions"}],"predecessor-version":[{"id":106469,"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/glossary\/106467\/revisions\/106469"}],"wp:attachment":[{"href":"https:\/\/mailrelay.com\/en\/wp-json\/wp\/v2\/media?parent=106467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}