{"id":20943,"date":"2023-06-16T00:00:00","date_gmt":"2023-06-16T00:00:00","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/modo-oscuro-email\/"},"modified":"2026-09-15T13:57:10","modified_gmt":"2026-09-15T13:57:10","slug":"modo-oscuro-email","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/","title":{"rendered":"Conceptos b\u00e1sicos del modo oscuro en el email"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We all know that light tends to win over dark. Just look at <i>Star Wars<\/i> or <i>Lord of the Rings<\/i>\u2026 or <i>The Divine Comedy<\/i>, for that matter. Pop culture \u2013 or just culture, really \u2013 has taught us that the dark side is not where you want to be. And for a long time, we believed it. But in recent years, the dark side of our apps has become the preferred choice for many users. It\u2019s not just Discord or Twitter \u2013\u00a0 dark mode is pretty much everywhere, email included.\u00a0<\/p>\n\n<p class=\"wp-block-paragraph\">We know. Email development is hard enough already. But this isn\u2019t a trend you can run away from. So, buckle up and get ready to learn what makes dark mode in email so popular, how it can help your deliverability, and how to optimize your emails for dark mode.\u00a0<\/p>\n\r\n    <nav data-content-type=\"longform\" class=\"toc-block longform-spacings px-5 py-6 px-md-6 px-lg-7 py-md-7 bg-light fs-sm rounded-lg\" aria-labelledby=\"toc-title-4511\"><p class=\"h5 m-0\" id=\"toc-title-4511\">\u00cdndice<\/p><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">01<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#what-is-dark-mode\">What is dark mode?<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">02<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#what-are-the-benefits-of-dark-mode\">What are the benefits of dark mode<\/a><a class=\"scrollme link-body-color\" href=\"#what-does-dark-mode-in-email-look-like\">What does dark mode in email look like?<\/a><a class=\"scrollme link-body-color\" href=\"#why-does-dark-mode-exist\">Why does dark mode exist?<\/a><a class=\"scrollme link-body-color\" href=\"#which-email-clients-provide-dark-mode-settings\">Which email clients provide dark mode settings?<\/a><a class=\"scrollme link-body-color\" href=\"#how-can-you-switch-your-emails-to-dark-mode\">How can you switch your emails to dark mode?<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">03<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#how-can-dark-mode-affect-your-email-deliverability\">How can dark mode affect your email deliverability?<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">04<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#how-can-you-optimize-your-emails-for-dark-mode\">How can you optimize your emails for dark mode?<\/a><a class=\"scrollme link-body-color\" href=\"#email-design-tips-for-dark-mode\">Email design tips for dark mode<\/a><a class=\"scrollme link-body-color\" href=\"#coding-tips-for-dark-mode\">Coding tips for dark mode<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">05<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#final-tips-before-sending\">Final tips before sending<\/a><\/div><\/div><\/nav>\n<h2 class=\"wp-block-heading\">What is dark mode?<\/h2>\n\n<p class=\"wp-block-paragraph\">There are no complicated definitions here \u2013 email dark mode is pretty much what it sounds like. Dark mode is <b>a setting users can turn on so an app\u2019s text displays on a black background instead of its regular light background.<\/b> Not every website or app has a dark mode feature, but it\u2019s common in text-heavy, white-background places like social media tools (Twitter, Instagram) and, of course, email clients.<\/p>\n\n<h2 class=\"wp-block-heading\">What are the benefits of dark mode<\/h2>\n\n<p class=\"wp-block-paragraph\">The fanbase for dark mode is reason enough to motivate you to make sure your emails are optimized for this feature. <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-marketing\/dark-mode-for-emails-infographic\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Nearly 82% of users polled by Android Authority<\/a> use the dark mode settings on the apps and smartphones alone.\u00a0\u00a0Traditionally, dark mode has been embraced and promoted by a more technical audience, but recent iPhone statistics show that users spend just <a href=\"https:\/\/blog.gitnux.com\/dark-mode-usage-statistics\/#:~:text=iPhone%20users%20spent%2050.18%25%20less,mode%20has%20on%20user%20experience.%20\" target=\"_tabs\" rel=\"noopener noreferrer\">over 50% less time<\/a> operating their devices when dark mode is enabled. This is a representation of how dark mode makes the user experience more efficient. There are many claims as to why dark mode is superior (and we\u2019ll get into them in more detail) but here are the top contenders:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Less strain on your vision<\/li>\n\n\n\n<li>Reduces blue light<\/li>\n\n\n\n<li>Power saving (drains less battery resources)<\/li>\n\n\n\n<li>More custom design options<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">\u00a0Regardless of the reasons, the statistics show It\u2019s clear that dark mode on devices is a must have option, but what does that look like for email specifically?<\/p>\n\n<h3 class=\"wp-block-heading\">What does dark mode in email look like?<\/h3>\n\n<p class=\"wp-block-paragraph\">Dark mode turns background colors dark, and it also <b>turns dark color text into light text<\/b> so that words will actually show up against the new background. So, what does that look like in an inbox?<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4219\" width=\"1834\" height=\"2560\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgun-NL-DM-scaled.jpg\" alt=\"An email from Mailgun in dark mode\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgun-NL-DM-scaled.jpg 1834w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgun-NL-DM-1101x1536.jpg 1101w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgun-NL-DM-215x300.jpg 215w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgun-NL-DM-768x1072.jpg 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgun-NL-DM-734x1024.jpg 734w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgun-NL-DM-1467x2048.jpg 1467w\" sizes=\"(max-width: 1834px) 100vw, 1834px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">Let\u2019s take our own Mailgun newsletter as an example. Not only are there changes to the background color and text body, but also changes to our logo and social icons.\u00a0\u00a0<\/p>\n\n<p class=\"wp-block-paragraph\">Another example is the Gmail inbox and the option to switch between dark mode and the classic \u201clight\u201d or \u201cday\u201d mode.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4220\" width=\"1024\" height=\"343\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/kl2.jpeg\" alt=\"Gmail inbox highlighting the social and promotions tabs\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/kl2.jpeg 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/kl2-300x100.jpeg 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/kl2-768x257.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">Source:\u00a0<a href=\"https:\/\/www.google.com\/url?sa=i&amp;url=https%3A%2F%2Fgreeneyeits.com%2Fremoving-gmail-inbox-tabs%2F&amp;psig=AOvVaw1WfqC439vu3rbJhon1FoqI&amp;ust=1616000167025000&amp;source=images&amp;cd=vfe&amp;ved=0CA0QjhxqFwoTCMCqjfajte8CFQAAAAAdAAAAABAQ\" target=\"_tabs\" rel=\"noopener noreferrer\">Green Eye IT<\/a><\/p>\n\n<p class=\"wp-block-paragraph\">Gmail&#8217;s \u00abnight\u00bb mode doesn\u2019t change anything about Gmail\u2019s tabs, its sidebar, or its general layout. The only changes are the background color and the font colors within the display.\u00a0<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4222\" width=\"1920\" height=\"900\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/inboxdark.jpeg\" alt=\"inboxdark\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/inboxdark.jpeg 1920w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/inboxdark-300x141.jpeg 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/inboxdark-768x360.jpeg 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/inboxdark-1024x480.jpeg 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/inboxdark-1536x720.jpeg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">Source: <a href=\"https:\/\/www.techblogbox.com\/gmail-dark-mode\/\" target=\"_tabs\" rel=\"noopener noreferrer\">TechBlogBox<\/a><\/p>\n\n<p class=\"wp-block-paragraph\">The switch to dark mode <b>doesn\u2019t change anything about Gmail\u2019s tabs or its general layout and usability<\/b>. The only changes are the background color and the font colors within the display.<\/p>\n\n<p class=\"wp-block-paragraph\">The minor changes might feel anti-climatic \u2013 what is the point of dark mode, anyway?<\/p>\n\n<h3 class=\"wp-block-heading\">Why does dark mode exist?<\/h3>\n\n<p class=\"wp-block-paragraph\">There\u2019s a couple of simple reasons for dark mode\u2019s existence: many people find it, quite literally, easy on the eyes. While there\u2019s <a href=\"https:\/\/www.wired.co.uk\/article\/dark-mode-chrome-android-ios-science\" target=\"_tabs\" rel=\"noopener noreferrer\">conflicting research<\/a> on whether dark mode really reduces <b>eye strain and technological blue light exposure<\/b>, some people prefer the darker background. Additionally, dark mode can extend the battery life of your phone or laptop by <a href=\"https:\/\/www.forbes.com\/uk\/advisor\/mobile-phones\/what-is-dark-mode-and-should-you-be-using-it\/\" target=\"_tabs\" rel=\"noopener noreferrer\">potentially using less energy<\/a>.<\/p>\n\n<p class=\"wp-block-paragraph\">The biggest true point in dark mode\u2019s favor is probably <b>its role in <\/b><a href=\"https:\/\/www.mailgun.com\/es\/blog\/email\/accesibilidad-email-proposito-ano-nuevo\/\" target=\"_tabs\" rel=\"noopener noreferrer\"><b>email accessibility<\/b><\/a>. Dark mode\u2019s high color contrasts and lowered brightness are generally considered to be <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/accessibility-and-dark-mode-the-latest-buzz-words\/\" target=\"_tabs\" rel=\"noopener noreferrer\">more readable for people<\/a> with visual impairments like light sensitivity.\u00a0\u00a0<\/p>\n\n<p class=\"wp-block-paragraph\">While everyone has their preferred reason for using dark mode, its increased popularity over the past few years is hard to deny \u2013 so much so that most major email clients support dark mode settings for their users.<\/p>\n\n<h3 class=\"wp-block-heading\">Which email clients provide dark mode settings?<\/h3>\n\n<p class=\"wp-block-paragraph\">It might be easier for us to list which email clients <i>don\u2019t <\/i>provide some sort of dark mode interface. But, for a quick reference, here\u2019s are the <b>major email clients <\/b>that use dark mode email settings:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><b>Gmail<\/b> (via web browser, Android mobile app, and iOS mobile app)<\/li>\n\n\n\n<li><b>Outlook<\/b> (via Outlook.com web browser, Mac desktop app, Windows desktop app, Android mobile app, and iOS mobile app)<\/li>\n\n\n\n<li><b>Apple Mail platforms<\/b> (via Apple Mail desktop app, iPhone Mail app, and iPad Mail app)<\/li>\n\n\n\n<li><b>Yahoo<\/b> (via web browser, Android mobile app, and iOS mobile app)<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">According to our <a href=\"https:\/\/www.pathwire.com\/research\/email-engagement-2021\" target=\"_tabs\" rel=\"noopener noreferrer\">2021 Email Engagement<\/a> report, it\u2019s pretty much guaranteed that most of your contacts will use at least one of these providers. The challenge, though, is that all these clients render dark mode emails a little differently. Some will auto-invert colors, some won\u2019t. Some will support <b>@media (prefers-color-scheme)<\/b>, others (we\u2019re looking at you, Gmail) won\u2019t. Therefore, when sending emails, your best bet for maximum engagement is to <b>make sure that they look great on both light and dark mode<\/b>.You may be asking, how? And why? Well, let\u2019s dive into how dark mode can affect your deliverability, and what you can do to make sure you stay on the good side of dark mode.<\/p>\n\n<h3 class=\"wp-block-heading\">How can you switch your emails to dark mode?<\/h3>\n\n<p class=\"wp-block-paragraph\">It\u2019s important to remember that dark mode settings are primarily a user-controlled preference, and each email client, device, or service will have its own processes and design options for users wanting to implement this feature.<\/p>\n\n<p class=\"wp-block-paragraph\">That being said, not all email clients are equal when it comes to dark mode optimization. The bulk of the heavy design work and optimization should be done on the email development side, and <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/dark-mode-email-testing\/\" target=\"_tabs\" rel=\"noopener noreferrer\">your emails should be tested<\/a> and previewed to avoid deliverability issues.<\/p>\n\n<h2 class=\"wp-block-heading\">How can dark mode affect your email deliverability?<\/h2>\n\n<p class=\"wp-block-paragraph\">There\u2019s one big reason why dark mode can impact your deliverability, and that\u2019s because email users are a fickle group. Many <b>email clients don\u2019t automatically optimize image email features<\/b> (logos, pictures, etc.) <b>for dark mode<\/b>, and unoptimized content can make your emails look messy and hard to read.<\/p>\n\n<p class=\"wp-block-paragraph\">Most dark-mode-using subscribers aren\u2019t going to take time to try to figure out how to read your bad-looking emails. And why should they? Instead, they\u2019ll ignore them, delete them, or <a href=\"https:\/\/www.mailgun.com\/es\/blog\/deliverability\/evitar-emails-vayan-spam\/\" target=\"_tabs\" rel=\"noopener noreferrer\">mark them as spam<\/a> \u2013 all of which <b>have a negative impact on your deliverability.<\/b><\/p>\n\n<p class=\"wp-block-paragraph\">On the other hand, if you take time to make sure your emails look their best even in the dark, they\u2019re much more likely to be read and positively engaged with. And remember: good email practices and engagement metrics mean good deliverability.<\/p>\n\n<p class=\"wp-block-paragraph\">So, what are some quick tweaks you can make to your email design to optimize your messages for dark mode?<\/p>\n\n<h2 class=\"wp-block-heading\">How can you optimize your emails for dark mode?<\/h2>\n\n<p class=\"wp-block-paragraph\">You\u2019ve got questions, and we\u2019ve got answers. We\u2019ve compiled some of the best and easiest ways to keep your emails looking good in dark mode.<\/p>\n\n<h3 class=\"wp-block-heading\">Email design tips for dark mode<\/h3>\n\n<p class=\"wp-block-paragraph\">Optimizing your emails and templates for dark mode doesn\u2019t have to be hard at all. Below, we\u2019ve collected some of our best design tips for making light emails dark.<\/p>\n\n<h4 class=\"wp-block-heading\">Make your images transparent<\/h4>\n\n<p class=\"wp-block-paragraph\">Making your email images transparent is as simple as picking images without a colored or white background. <b>Transparent images allow you to place logos, pictures, and more on any email background without having conflicting colors. <\/b>Transparent background images that you find online will often have a white-and-grey checked background, like the example of our olden-days logo below.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4224\" width=\"900\" height=\"329\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mg.png\" alt=\"Mailgun logo on a grey and white checkered background\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mg.png 900w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mg-300x110.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mg-768x281.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">Meanwhile, images with dark background colors will keep those backgrounds no matter how the email looks.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4226\" width=\"1170\" height=\"390\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgundark.png\" alt=\"Alternative Mailgun logo design on dark background\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgundark.png 1170w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgundark-300x100.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgundark-768x256.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/mailgundark-1024x341.png 1024w\" sizes=\"(max-width: 1170px) 100vw, 1170px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">Make sure you choose images that will look the same on any background, and that you save them as transparent pngs. When your user opens your email in dark mode, your images will look seamless and clean, and your users will be able to view them without getting a messy or distracting layout. Remember to also test your logo contrast on a light and dark background \u2013 if your logo doesn\u2019t stand out, your readers won\u2019t know it\u2019s you.<\/p>\n\n<h4 class=\"wp-block-heading\">Add a white outline to dark images and fonts<\/h4>\n\n<p class=\"wp-block-paragraph\">While you may want to avoid some image backgrounds so your graphics blend into dark mode, sometimes you may also want to draw attention to dark fonts and images <b>to improve their visibility.<\/b> You can very easily add a white outline to your images and text in image-editing tools like Photoshop.\u00a0<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4230\" width=\"512\" height=\"183\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/darkmodeoutline.png\" alt=\"App Store and Google Play buttons on light and dark backgrounds\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/darkmodeoutline.png 512w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/darkmodeoutline-300x107.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n<p class=\"wp-block-paragraph\">This way, your images look exactly the same as they always do in light mode. However, they end up<b> standing out and being readable<\/b> to users in dark mode. Users will quickly dismiss your emails if they can\u2019t read them, but outlines are a simple way to keep both readability and visual effect.<\/p>\n\n<h4 class=\"wp-block-heading\">Consider plain-text emails<\/h4>\n\n<p class=\"wp-block-paragraph\">Plain-text emails are nothing to scoff at. They add authenticity and get rid of unnecessary, distracting bells and whistles \u2013 simpler designs are <a href=\"https:\/\/www.mailjet.com\/blog\/news\/email-marketing-trends\/#simplified\" target=\"_tabs\" rel=\"noopener noreferrer\">even a trend for this year<\/a>. Maybe you don\u2019t use many images or fancy logos in your email program, or you\u2019d prefer not to deal with the hassle. The benefit of plain-text emails is they will <b>always display in dark mode without a problem<\/b> \u2013 a light background goes dark, black text becomes white text, and you\u2019re good to go.\u00a0<\/p>\n\n<p class=\"wp-block-paragraph\">If you know your contact list likes straightforward emails without a lot of bells and whistles, plain-text emails may be right up your alley. They\u2019ll look good, your users will get what they want, and your deliverability will be in great shape.<\/p>\n\n<h3 class=\"wp-block-heading\">Coding tips for dark mode<\/h3>\n\n<p class=\"wp-block-paragraph\">Email rendering is a developer\u2019s nightmare. And, of course, dark mode wasn\u2019t going to be any different. With each client rendering dark mode emails differently, it\u2019s hard to build a message that will look the same across all providers.<\/p>\n\n<p class=\"wp-block-paragraph\">Alongside these universal design recommendations, there are several coding fixes you can use to create a customized dark mode experience for your emails.\u00a0<\/p>\n\n<h4 class=\"wp-block-heading\">Enable dark mode with meta tags and :root selector<\/h4>\n\n<p class=\"wp-block-paragraph\">Use the <b><\/b> in the <b><\/b> tag to tell the email client that your email supports both light and dark mode.<\/p>\n\n<p class=\"wp-block-paragraph\">If your user has this setting applied on their email app, these meta tags below will ensure dark mode is enabled:\u00a0\u00a0<\/p>\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                                <code id=\"code_0_content\" class=\"language-PHP\">\r\n\r\n                                    &lt;meta name=&quot;color-scheme&quot; content=&quot;light dark&quot;&gt;rnrn&lt;meta name=&quot;supported-color-schemes&quot; content=&quot;light dark&quot;&gt;\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n<p class=\"wp-block-paragraph\">The :root selector will allow the email client to look for the color scheme style it needs without having to read through all the styles.<\/p>\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                                <code id=\"code_0_content\" class=\"language-PHP\">\r\n\r\n                                    &lt;style type=&quot;text\/css&quot;&gt;rn:root {rn\u00a0\u00a0color-scheme: light dark;rn\u00a0\u00a0supported-color-schemes: light dark;rn}rn&lt;\/style&gt;\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n<h4 class=\"wp-block-heading\">Add dark mode styles via media query<\/h4>\n\n<p class=\"wp-block-paragraph\">\nYou can create custom CSS styles to determine how different elements will look when using dark mode, like logos, font color, background, or link text.<\/p>\n\n<p class=\"wp-block-paragraph\">Add this media query to your\u00a0<strong>&lt;style&gt;<\/strong>\u00a0block to personalize these elements with your brand\u2019s preferred color values:<\/p>\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                                <code id=\"code_0_content\" class=\"language-PHP\">\r\n\r\n                                    @media (prefers-color-scheme: dark ) {rn\u00a0\u00a0\u00a0\/* Shows dark mode logo *\/rn.dark-logo-wrapper,.dark-logo {rn\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: block !important;rn}rn\u00a0\u00a0\u00a0\/* Hides light mode logo *\/rn\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.light-logo {rn\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: none !important;rn}rnrn\u00a0\u00a0\u00a0\/* Creates a custom dark mode background color *\/rn\u00a0\u00a0.body {rn\u00a0\u00a0\u00a0\u00a0background-color: #282828 !important;rn\u00a0\u00a0\u00a0\u00a0color: #ffffff\u00a0 !important;rn}rnrn\u00a0\/* Sets the font color *\/rn\u00a0\u00a0h1, h2, h3, p, td {rn\u00a0\u00a0\u00a0\u00a0color: #ffffff !important;rn}rnrn\/* Sets the text link color *\/\u00a0\u00a0rn\u00a0\u00a0a {\u00a0rncolor: #43D6B7 !important;rn}rnrn\/* More styles here *\/\u00a0\u00a0rn}\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n<p class=\"wp-block-paragraph\">You can add this to your email\u2019s\u00a0<strong>&lt;style&gt;&lt;\/style&gt;<\/strong>\u00a0section to create custom dark mode styles for iOS, Apple Mail, and some versions of Outlook.<\/p>\n\n<h4 class=\"wp-block-heading\">Add the right classes and styles to your dark mode specific elements<\/h4>\n\n<p class=\"wp-block-paragraph\">If you have light and dark versions of certain elements, like images, you\u2019ll need to ensure the styles you\u2019ve created for both dark and light mode show up when they are supposed to. This is especially important if you have a light and dark option for your logo and want to switch between them depending on whether the recipient uses dark mode or not.<\/p>\n\n<p class=\"wp-block-paragraph\">\u00a0An example of how this would look in your HTML is below:<\/p>\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                HTML                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-markup\">\r\n                                <code id=\"code_0_content\" class=\"language-markup\">\r\n\r\n                                    &lt;!-- start HEADER_LOGO --&gt;rn&lt;a href=&quot;https:\/\/mailgun.com\/&quot; target=&quot;_blank&quot;&gt;rnrn&lt;img src=&quot;https:\/\/www.yoursite.com\/images\/mailgun-light.png&quot; class=&quot;light-logo&quot; \/&gt;rnrn&lt;!-- Hide the dark logo in Outlook and Windows 10 Mail with conditional code but it will be revealed if dark mode is triggered --&gt;rn&lt;div class=&quot;dark-logo-wrapper&quot; style=&quot;mso-hide: all; display: none;&quot;&gt;rn\u00a0\u00a0\u00a0&lt;img src=&quot;https:\/\/www.yoursite.com\/images\/mailgun-dark.png&quot; class=&quot;dark-logo&quot; style=&quot;display: none;&quot; \/&gt;rn&lt;\/div&gt;\u00a0rnrn&lt;\/a&gt;rn&lt;!-- end HEADER_LOGO --&gt;rn\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n<p class=\"wp-block-paragraph\">Not all these fixes will work across all clients and, no matter how much we try, our dark mode emails might end up looking slightly different across different apps and providers. If you want to be sure, test your email rendering before sending.<\/p>\n\n<h2 class=\"wp-block-heading\">Final tips before sending<\/h2>\n\n<p class=\"wp-block-paragraph\">Email dark mode has become a popular feature since its creation. You should be ready to optimize your emails for your contact list if you want your emails to be engaged with and your deliverability to stay healthy.<\/p>\n\n<p class=\"wp-block-paragraph\">Here are a few easy tips to remember for sending in dark mode:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Choose images and logos that will stand out on both light and dark mode.<\/li>\n\n\n\n<li>Use transparent, background-less images whenever possible.<\/li>\n\n\n\n<li>Add a white outline to make dark fonts, logos, and images stand out.<\/li>\n\n\n\n<li>If it\u2019s a good fit for your contacts, consider sending plain-text emails to your list for automatic, hassle-free display.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">Most importantly, you\u2019ll want to <b>test your emails before sending<\/b>. The world of email is constantly changing and dark mode is too, so make sure you test your emails on the most popular email clients in your lists. You can do this manually, or using email testing tools like <a href=\"https:\/\/www.litmus.com\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Litmus<\/a> or <a href=\"https:\/\/www.emailonacid.com\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Email on Acid<\/a>.\u00a0<\/p>\n\n<p class=\"wp-block-paragraph\">Let\u2019s face it. It might cause you a few headaches and it could get messy, but the dark side isn\u2019t going anywhere. Email dark mode definitely has its advantages when it comes to deliverability and accessibility, so it\u2019s time to just embrace it. Plus, you don\u2019t <i>really<\/i> need Darth Vader, Sauron, or a visit to the ninth circle of hell to get it right.<\/p>\n    <div data-content-type=\"longform\" class=\"longform-spacings\">\r\n        <div class=\"cta bg-primary rounded-lg px-5 py-6 p-md-7 px-md-6\">\r\n                    <div class=\"form-subscription\">\r\n                            <div class=\"h4 mb-3\">\r\n                    Keep me posted! Get great resources in your inbox every week.                <\/div>\r\n                                    <form accept-charset=\"UTF-8\" action=\"\" enctype=\"multipart\/form-data\" data-form-subscription method=\"POST\" style=\"max-width: 400px;\">\r\n                <div class=\"row justify-content-between align-items-top g-2\">\r\n                    <div class=\"col-10\">\r\n                        <input type=\"email\" name=\"email\" class=\"form-control\" placeholder=\"Email\" autocomplete=\"email\" required>\r\n                        <div data-fs=\"error\" role=\"alert\" class=\"invalid-feedback\">\r\n                            Please complete this required field.                        <\/div>\r\n                    <\/div>\r\n                                            <div class=\"col-12 order-last mt-3 fs-xxs\" data-fs=\"acceptance\" style=\"display:none;\">\r\n                            \r\n                                <div class=\"form-check\">\r\n                                    <input id=\"formSubscriptionAcceptance-terms-5778\" class=\"form-check-input\"\r\n                                        type=\"checkbox\" name=\"terms\">\r\n                                    <label for=\"formSubscriptionAcceptance-terms-5778\" class=\"form-check-label text-body-color\">\r\n                                        He le\u00eddo y acepto los T\u00e9rminos de Servicio.                                        <span class=\"hs-form-required\">*<\/span>\r\n                                    <\/label>\r\n                                <\/div>\r\n\r\n                            \r\n                                <div class=\"form-check\">\r\n                                    <input id=\"formSubscriptionAcceptance-privacy-6957\" class=\"form-check-input\"\r\n                                        type=\"checkbox\" name=\"privacy\">\r\n                                    <label for=\"formSubscriptionAcceptance-privacy-6957\" class=\"form-check-label text-body-color\">\r\n                                        He le\u00eddo y acepto la Pol\u00edtica de Privacidad.                                        <span class=\"hs-form-required\">*<\/span>\r\n                                    <\/label>\r\n                                <\/div>\r\n\r\n                                                    <\/div>\r\n                    \r\n                                            <div class=\"col-12 order-last fs-xxs mb-0 mt-2 text-body-color\">\r\n                            Send me the Mailjet Newsletter. I expressly agree to receive the newsletter and know that I can easily unsubscribe at any time.                        <\/div>\r\n                    \r\n                    <div class=\"col-2\">\r\n                        <button type=\"submit\" value=\"Submit\" aria-label=\"Submit\" class=\"btn btn-secondary btn-icon\">\r\n                            <svg aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/layout\/chevron-right.svg\"><\/svg>\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <input type=\"hidden\" name=\"formSubscriptionRecaptchaToken\" data-fs=\"recaptcha-token\">\r\n                <input type=\"hidden\" name=\"customListID\" value=\"\">\r\n\r\n            <\/form>\r\n            <div data-fs=\"message-success\" style=\"display: none;\">\r\n                <p class=\"mb-0 mt-2 text-body-color\">\r\n                    Check your inbox monthly for your Mailjet Newsletter!                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <\/div>\r\n    <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Descubre en qu\u00e9 consiste el modo oscuro, por qu\u00e9 lo prefieren los usuarios y c\u00f3mo puede ayudar a tu entregabilidad.<\/p>\n","protected":false},"author":27,"featured_media":4074,"menu_order":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"blog_category":[20],"class_list":["post-20943","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-email"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Todo lo que necesitas saber sobre el modo oscuro en el email - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"Descubre en qu\u00e9 consiste el modo oscuro y por qu\u00e9 les encanta a los usuarios. Aprende a optimizarlo para los clientes de email y descubre c\u00f3mo puede ayudar a tu entregabilidad.\" \/>\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.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Todo lo que necesitas saber sobre el modo oscuro en el email - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"Descubre en qu\u00e9 consiste el modo oscuro y por qu\u00e9 les encanta a los usuarios. Aprende a optimizarlo para los clientes de email y descubre c\u00f3mo puede ayudar a tu entregabilidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/\" \/>\n<meta property=\"og:site_name\" content=\"Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-15T13:57:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/\",\"name\":\"Todo lo que necesitas saber sobre el modo oscuro en el email - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Email.png\",\"datePublished\":\"2023-06-16T00:00:00+00:00\",\"dateModified\":\"2026-09-15T13:57:10+00:00\",\"description\":\"Descubre en qu\u00e9 consiste el modo oscuro y por qu\u00e9 les encanta a los usuarios. Aprende a optimizarlo para los clientes de email y descubre c\u00f3mo puede ayudar a tu entregabilidad.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Email.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Email.png\",\"width\":720,\"height\":448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/email\\\/modo-oscuro-email\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Conceptos b\u00e1sicos del modo oscuro en el email\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Potentes API de email transaccional que te permiten enviar, recibir y hacer seguimiento de emails, creadas pensando en los desarrolladores. \u00a1Descubre m\u00e1s!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Transactional Email API Service For Developers | Mailgun\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Todo lo que necesitas saber sobre el modo oscuro en el email - Transactional Email API Service For Developers | Mailgun","description":"Descubre en qu\u00e9 consiste el modo oscuro y por qu\u00e9 les encanta a los usuarios. Aprende a optimizarlo para los clientes de email y descubre c\u00f3mo puede ayudar a tu entregabilidad.","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.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/","og_locale":"es_ES","og_type":"article","og_title":"Todo lo que necesitas saber sobre el modo oscuro en el email - Transactional Email API Service For Developers | Mailgun","og_description":"Descubre en qu\u00e9 consiste el modo oscuro y por qu\u00e9 les encanta a los usuarios. Aprende a optimizarlo para los clientes de email y descubre c\u00f3mo puede ayudar a tu entregabilidad.","og_url":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","article_modified_time":"2026-09-15T13:57:10+00:00","og_image":[{"width":720,"height":448,"url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/","url":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/","name":"Todo lo que necesitas saber sobre el modo oscuro en el email - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","datePublished":"2023-06-16T00:00:00+00:00","dateModified":"2026-09-15T13:57:10+00:00","description":"Descubre en qu\u00e9 consiste el modo oscuro y por qu\u00e9 les encanta a los usuarios. Aprende a optimizarlo para los clientes de email y descubre c\u00f3mo puede ayudar a tu entregabilidad.","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/#primaryimage","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Email.png","width":720,"height":448},{"@type":"BreadcrumbList","@id":"https:\/\/www.mailgun.com\/es\/blog\/email\/modo-oscuro-email\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/es\/blog\/"},{"@type":"ListItem","position":3,"name":"Conceptos b\u00e1sicos del modo oscuro en el email"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/es\/#website","url":"https:\/\/www.mailgun.com\/es\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Potentes API de email transaccional que te permiten enviar, recibir y hacer seguimiento de emails, creadas pensando en los desarrolladores. \u00a1Descubre m\u00e1s!","publisher":{"@id":"https:\/\/www.mailgun.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/es\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","width":512,"height":512,"caption":"Transactional Email API Service For Developers | Mailgun"},"image":{"@id":"https:\/\/www.mailgun.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/20943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/users\/27"}],"version-history":[{"count":3,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/20943\/revisions"}],"predecessor-version":[{"id":21698,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/20943\/revisions\/21698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media\/4074"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media?parent=20943"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog_category?post=20943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}