{"id":20692,"date":"2023-06-16T00:00:00","date_gmt":"2023-06-16T00:00:00","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/email-dark-mode-2\/"},"modified":"2026-09-15T04:47:27","modified_gmt":"2026-09-15T04:47:27","slug":"email-dark-mode","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/","title":{"rendered":"O b\u00e1sico do modo escuro de e-mail"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Todo mundo sabe que a luz costuma vencer a escurid\u00e3o. Basta olhar para <i>Star Wars<\/i> ou <i>O Senhor dos An\u00e9is<\/i>&#8230; ou <i>A Divina Com\u00e9dia<\/i>, por exemplo. A cultura pop \u2014 ou simplesmente a cultura \u2014 nos ensinou que o lado sombrio n\u00e3o \u00e9 onde voc\u00ea quer estar. E, por muito tempo, n\u00f3s acreditamos nisso. Mas, nos \u00faltimos anos, o lado escuro dos nossos aplicativos se tornou a escolha preferida de muitos usu\u00e1rios. N\u00e3o \u00e9 apenas no Discord ou no Twitter \u2013\u00a0o modo escuro est\u00e1 em praticamente todos os lugares, incluindo o e-mail.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00f3s entendemos. O desenvolvimento de e-mail j\u00e1 \u00e9 bem dif\u00edcil. Mas essa n\u00e3o \u00e9 uma tend\u00eancia da qual voc\u00ea possa fugir. Ent\u00e3o, prepare-se para aprender o que torna o modo escuro no e-mail t\u00e3o popular, como ele pode ajudar sua entregabilidade e como otimizar seus e-mails para o modo escuro.\u00a0<\/p>\n\n\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-9997\"><p class=\"h5 m-0\" id=\"toc-title-9997\">\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=\"#o-que-e-o-modo-escuro\">O que \u00e9 o modo escuro?<\/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=\"#quais-sao-os-beneficios-do-modo-escuro\">Quais s\u00e3o os benef\u00edcios do modo escuro<\/a><a class=\"scrollme link-body-color\" href=\"#como-e-o-modo-escuro-no-e-mail\">Como \u00e9 o modo escuro no e-mail?<\/a><a class=\"scrollme link-body-color\" href=\"#por-que-o-modo-escuro-existe\">Por que o modo escuro existe?<\/a><a class=\"scrollme link-body-color\" href=\"#quais-clientes-de-e-mail-tem-configuracoes-de-modo-escuro\">Quais clientes de e-mail t\u00eam configura\u00e7\u00f5es de modo escuro?<\/a><a class=\"scrollme link-body-color\" href=\"#como-mudar-seus-e-mails-para-o-modo-escuro\">Como mudar seus e-mails para o modo escuro?<\/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=\"#como-o-modo-escuro-pode-afetar-a-entregabilidade-de-e-mail\">Como o modo escuro pode afetar a entregabilidade de e-mail?<\/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=\"#como-voce-pode-otimizar-seus-e-mails-para-o-modo-escuro\">Como voc\u00ea pode otimizar seus e-mails para o modo escuro?<\/a><a class=\"scrollme link-body-color\" href=\"#dicas-de-design-de-e-mail-para-o-modo-escuro\">Dicas de design de e-mail para o modo escuro<\/a><a class=\"scrollme link-body-color\" href=\"#dicas-de-programacao-para-o-modo-escuro\">Dicas de programa\u00e7\u00e3o para o modo escuro<\/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=\"#dicas-finais-antes-de-enviar\">Dicas finais antes de enviar<\/a><\/div><\/div><\/nav>\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 o modo escuro?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o h\u00e1 defini\u00e7\u00f5es complicadas aqui \u2014 o modo escuro do e-mail \u00e9 basicamente o que o nome sugere. O modo escuro \u00e9 <b>uma configura\u00e7\u00e3o que os usu\u00e1rios podem ativar para que o texto de um aplicativo seja exibido em um fundo preto em vez do seu fundo claro habitual.<\/b> Nem todos os sites ou aplicativos t\u00eam o recurso de modo escuro, mas ele \u00e9 comum em espa\u00e7os com muito texto e fundo branco, como ferramentas de redes sociais (Twitter, Instagram) e, claro, clientes de e-mail.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quais s\u00e3o os benef\u00edcios do modo escuro<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A base de f\u00e3s do modo escuro j\u00e1 \u00e9 motivo suficiente para motivar voc\u00ea a garantir que seus e-mails sejam otimizados para esse recurso. <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-marketing\/dark-mode-for-emails-infographic\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Quase 82% dos usu\u00e1rios entrevistados pela Android Authority<\/a> usam as configura\u00e7\u00f5es de modo escuro apenas em aplicativos e smartphones.\u00a0\u00a0Tradicionalmente, o modo escuro tem sido adotado e promovido por um p\u00fablico mais t\u00e9cnico, mas estat\u00edsticas recentes do iPhone mostram que os usu\u00e1rios passam apenas <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\">mais de 50% menos tempo<\/a> operando seus dispositivos quando o modo escuro est\u00e1 ativado. Essa \u00e9 uma representa\u00e7\u00e3o de como o modo escuro torna a experi\u00eancia do usu\u00e1rio mais eficiente. H\u00e1 muitas alega\u00e7\u00f5es sobre os motivos pelos quais o modo escuro \u00e9 superior (e entraremos em mais detalhes sobre isso), mas aqui est\u00e3o os principais:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Menos tens\u00e3o na sua vis\u00e3o<\/li>\n\n\n\n<li>Redu\u00e7\u00e3o da luz azul<\/li>\n\n\n\n<li>Economia de energia (consome menos bateria)<\/li>\n\n\n\n<li>Mais op\u00e7\u00f5es de design personalizado<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a0Independentemente dos motivos, as estat\u00edsticas mostram claramente que o modo escuro nos dispositivos \u00e9 uma op\u00e7\u00e3o obrigat\u00f3ria. Mas como isso funciona especificamente para o e-mail?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Como \u00e9 o modo escuro no e-mail?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O modo escuro transforma as cores de fundo em tons escuros e tamb\u00e9m <b>transforma textos de cor escura em claros<\/b> para que as palavras realmente apare\u00e7am no novo fundo. Ent\u00e3o, como isso se parece em uma caixa de entrada?<\/p>\n\n\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\n\n<p class=\"wp-block-paragraph\">Vamos usar a pr\u00f3pria newsletter da Mailgun como exemplo. N\u00e3o h\u00e1 apenas altera\u00e7\u00f5es na cor do fundo e no corpo do texto, mas tamb\u00e9m no nosso logotipo e nos \u00edcones das redes sociais.\u00a0\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Outro exemplo \u00e9 a caixa de entrada do Gmail e a op\u00e7\u00e3o de alternar entre o modo escuro e o modo cl\u00e1ssico \u201cclaro\u201d ou \u201cdia\u201d.<\/p>\n\n\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\n\n<p class=\"wp-block-paragraph\">Fonte:\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\n\n<p class=\"wp-block-paragraph\">O modo \u201cnoturno\u201d do Gmail n\u00e3o muda nada nas abas, na barra lateral ou no layout geral. As \u00fanicas altera\u00e7\u00f5es s\u00e3o a cor de fundo e as cores da fonte na exibi\u00e7\u00e3o.\u00a0<\/p>\n\n\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\n\n<p class=\"wp-block-paragraph\">Fonte: <a href=\"https:\/\/www.techblogbox.com\/gmail-dark-mode\/\" target=\"_tabs\" rel=\"noopener noreferrer\">TechBlogBox<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A mudan\u00e7a para o modo escuro <b>n\u00e3o altera nada nas abas do Gmail ou no seu layout geral e usabilidade<\/b>. As \u00fanicas altera\u00e7\u00f5es s\u00e3o a cor de fundo e as cores da fonte na exibi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essas pequenas mudan\u00e7as podem parecer frustrantes \u2014 qual \u00e9 o objetivo do modo escuro, afinal?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Por que o modo escuro existe?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Existem alguns motivos simples para a exist\u00eancia do modo escuro: muitas pessoas acham que ele, literalmente, descansa os olhos. Embora haja <a href=\"https:\/\/www.wired.co.uk\/article\/dark-mode-chrome-android-ios-science\" target=\"_tabs\" rel=\"noopener noreferrer\">pesquisas conflitantes<\/a> sobre se o modo escuro realmente reduz a <b>tens\u00e3o ocular e a exposi\u00e7\u00e3o tecnol\u00f3gica \u00e0 luz azul<\/b>, algumas pessoas preferem o fundo mais escuro. Al\u00e9m disso, o modo escuro pode prolongar a dura\u00e7\u00e3o da bateria do seu celular ou notebook ao <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\">potencialmente consumir menos energia<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O maior ponto a favor do modo escuro \u00e9 provavelmente <b>sua fun\u00e7\u00e3o na <\/b><a href=\"https:\/\/www.mailgun.com\/blog\/email\/faca-da-acessibilidade-de-e-mail-sua-resolucao-de-ano-novo\/\" target=\"_tabs\" rel=\"noopener noreferrer\"><b>acessibilidade em e-mails<\/b><\/a>. Os altos contrastes de cores e o brilho reduzido do modo escuro s\u00e3o geralmente considerados <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/accessibility-and-dark-mode-the-latest-buzz-words\/\" target=\"_tabs\" rel=\"noopener noreferrer\">mais leg\u00edveis para pessoas<\/a> com defici\u00eancias visuais, como sensibilidade \u00e0 luz.\u00a0\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Embora cada um tenha seu motivo preferido para usar o modo escuro, sua crescente popularidade nos \u00faltimos anos \u00e9 dif\u00edcil de negar \u2014 tanto que os principais clientes de e-mail oferecem suporte \u00e0s configura\u00e7\u00f5es de modo escuro para seus usu\u00e1rios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quais clientes de e-mail t\u00eam configura\u00e7\u00f5es de modo escuro?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Talvez seja mais f\u00e1cil listar quais clientes de e-mail <i>n\u00e3o<\/i> oferecem algum tipo de interface de modo escuro. Mas, para uma refer\u00eancia r\u00e1pida, aqui est\u00e3o os <b>principais clientes de e-mail<\/b> que usam configura\u00e7\u00f5es de modo escuro para e-mail:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Gmail<\/b> (via navegador web, aplicativo m\u00f3vel para Android e aplicativo m\u00f3vel para iOS)<\/li>\n\n\n\n<li><b>Outlook<\/b> (via navegador web do Outlook.com, aplicativo de desktop para Mac, aplicativo de desktop para Windows, aplicativo m\u00f3vel para Android e aplicativo m\u00f3vel para iOS)<\/li>\n\n\n\n<li><b>Plataformas do Apple Mail<\/b> (via aplicativo de desktop do Apple Mail, aplicativo do Mail para iPhone e aplicativo do Mail para iPad)<\/li>\n\n\n\n<li><b>Yahoo<\/b> (via navegador web, aplicativo m\u00f3vel para Android e aplicativo m\u00f3vel para iOS)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">De acordo com nossa <a href=\"https:\/\/www.pathwire.com\/research\/email-engagement-2021\" target=\"_tabs\" rel=\"noopener noreferrer\">Engajamento de e-mail de 2021<\/a> relat\u00f3rio, \u00e9 praticamente garantido que a maioria dos seus contatos usar\u00e1 pelo menos um desses provedores. O desafio, no entanto, \u00e9 que todos esses clientes renderizam os e-mails em modo escuro de forma um pouco diferente. Alguns v\u00e3o inverter as cores automaticamente, outros n\u00e3o. Alguns ter\u00e3o suporte a <b>@media (prefers-color-scheme)<\/b>, enquanto outros (estamos olhando para voc\u00ea, Gmail) n\u00e3o ter\u00e3o. Portanto, ao enviar e-mails, sua melhor aposta para o m\u00e1ximo engajamento \u00e9 <b>garantir que eles fiquem \u00f3timos tanto no modo claro quanto no modo escuro<\/b>. Voc\u00ea deve estar se perguntando: como? E por qu\u00ea? Bem, vamos nos aprofundar em como o modo escuro pode afetar sua entregabilidade e no que voc\u00ea pode fazer para garantir que voc\u00ea fique do lado bom do modo escuro.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Como mudar seus e-mails para o modo escuro?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 importante lembrar que as configura\u00e7\u00f5es do modo escuro s\u00e3o principalmente uma prefer\u00eancia controlada pelo usu\u00e1rio, e cada cliente de e-mail, dispositivo ou servi\u00e7o ter\u00e1 seus pr\u00f3prios processos e op\u00e7\u00f5es de design para os usu\u00e1rios que desejam implementar esse recurso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dito isso, nem todos os clientes de e-mail s\u00e3o iguais quando se trata da otimiza\u00e7\u00e3o para o modo escuro. A maior parte do trabalho pesado de design e otimiza\u00e7\u00e3o deve ser feita no lado do desenvolvimento de e-mail, e <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/dark-mode-email-testing\/\" target=\"_tabs\" rel=\"noopener noreferrer\">seus e-mails devem ser testados<\/a> e pr\u00e9-visualizados para evitar problemas de entregabilidade.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como o modo escuro pode afetar a entregabilidade de e-mail?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e1 um grande motivo pelo qual o modo escuro pode impactar sua entregabilidade: os usu\u00e1rios de e-mail s\u00e3o um grupo inconstante. Muitos <b>clientes de e-mail n\u00e3o otimizam automaticamente os recursos de imagem dos e-mails<\/b> (logotipos, fotos, etc.) <b>para o modo escuro<\/b>, e um conte\u00fado n\u00e3o otimizado pode fazer com que seus e-mails pare\u00e7am confusos e dif\u00edceis de ler.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A maioria dos assinantes que usam o modo escuro n\u00e3o vai perder tempo tentando descobrir como ler seus e-mails com apar\u00eancia ruim. E por que fariam isso? Em vez disso, v\u00e3o ignor\u00e1-los, exclu\u00ed-los ou <a href=\"https:\/\/www.mailgun.com\/blog\/deliverability\/avoid-emails-going-to-spam\/\" target=\"_tabs\" rel=\"noopener noreferrer\">marc\u00e1-los como spam<\/a> \u2014 e tudo isso <b>tem um impacto negativo na sua entregabilidade.<\/b><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por outro lado, se voc\u00ea dedicar um tempo para garantir que seus e-mails tenham a melhor apar\u00eancia, mesmo no escuro, \u00e9 muito mais prov\u00e1vel que eles sejam lidos e gerem engajamento positivo. E lembre-se: boas pr\u00e1ticas de e-mail e m\u00e9tricas de engajamento significam uma boa entregabilidade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ent\u00e3o, quais s\u00e3o alguns ajustes r\u00e1pidos que voc\u00ea pode fazer no seu design de e-mail para otimizar suas mensagens para o modo escuro?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como voc\u00ea pode otimizar seus e-mails para o modo escuro?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea tem perguntas, e n\u00f3s temos as respostas. Reunimos algumas das melhores e mais f\u00e1ceis maneiras de manter a boa apar\u00eancia dos seus e-mails no modo escuro.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dicas de design de e-mail para o modo escuro<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Otimizar seus e-mails e modelos para o modo escuro n\u00e3o precisa ser nada dif\u00edcil. Abaixo, reunimos algumas das nossas melhores dicas de design para transformar e-mails claros em escuros.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Deixe as suas imagens transparentes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Deixar as imagens do seu e-mail transparentes \u00e9 t\u00e3o simples quanto escolher imagens sem um fundo colorido ou branco. <b>Imagens transparentes permitem que voc\u00ea coloque logotipos, fotos e muito mais em qualquer fundo de e-mail sem ter conflito de cores. <\/b>As imagens com fundo transparente que voc\u00ea encontra online costumam ter um fundo xadrez em branco e cinza, como no exemplo do nosso antigo logotipo abaixo.<\/p>\n\n\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\n\n<p class=\"wp-block-paragraph\">Enquanto isso, as imagens com cores de fundo escuras manter\u00e3o esses fundos, n\u00e3o importando a apar\u00eancia do e-mail.<\/p>\n\n\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\n\n<p class=\"wp-block-paragraph\">Certifique-se de escolher imagens que tenham a mesma apar\u00eancia em qualquer fundo e de salv\u00e1-las como arquivos PNG transparentes. Quando seu usu\u00e1rio abrir seu e-mail no modo escuro, suas imagens parecer\u00e3o perfeitas e limpas, e seus usu\u00e1rios poder\u00e3o visualiz\u00e1-las sem um layout confuso ou que cause distra\u00e7\u00e3o. Lembre-se de tamb\u00e9m testar o contraste do seu logotipo em um fundo claro e em um escuro \u2014 se o seu logotipo n\u00e3o se destacar, quem est\u00e1 lendo n\u00e3o vai saber que \u00e9 voc\u00ea.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adicione um contorno branco em fontes e imagens escuras<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Embora voc\u00ea possa querer evitar alguns fundos de imagem para que seus gr\u00e1ficos se integrem ao modo escuro, \u00e0s vezes voc\u00ea tamb\u00e9m pode querer chamar aten\u00e7\u00e3o para imagens e fontes escuras <b>a fim de melhorar a visibilidade delas.<\/b> \u00c9 muito f\u00e1cil adicionar um contorno branco em suas imagens e textos usando ferramentas de edi\u00e7\u00e3o de imagem como o Photoshop.\u00a0<\/p>\n\n\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\n\n<p class=\"wp-block-paragraph\">Dessa forma, suas imagens ficam exatamente da mesma maneira que sempre aparecem no modo claro. No entanto, elas acabam <b>se destacando e ficando leg\u00edveis<\/b> para os usu\u00e1rios no modo escuro. Os usu\u00e1rios ignorar\u00e3o rapidamente seus e-mails se n\u00e3o conseguirem l\u00ea-los, mas os contornos s\u00e3o uma maneira simples de manter a legibilidade e o efeito visual.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Considere e-mails em texto simples<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">E-mails em texto simples n\u00e3o s\u00e3o algo a se ignorar. Eles adicionam autenticidade e eliminam os excessos desnecess\u00e1rios que distraem \u2014 os designs mais simples s\u00e3o <a href=\"https:\/\/www.mailjet.com\/blog\/news\/email-marketing-trends\/#simplified\" target=\"_tabs\" rel=\"noopener noreferrer\">at\u00e9 uma tend\u00eancia para este ano<\/a>. Talvez voc\u00ea n\u00e3o use muitas imagens ou logotipos elaborados no seu programa de e-mail, ou prefira n\u00e3o lidar com o inc\u00f4modo. A vantagem dos e-mails em texto simples \u00e9 que eles <b>sempre v\u00e3o ser exibidos no modo escuro sem problemas<\/b> \u2014 um fundo claro fica escuro, o texto preto se torna branco e pronto, tudo certo.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea sabe que a sua lista de contatos gosta de e-mails diretos sem muitos enfeites, os e-mails em texto simples podem ser exatamente o que voc\u00ea precisa. Eles ficar\u00e3o com uma boa apar\u00eancia, seus usu\u00e1rios receber\u00e3o o que querem e sua entregabilidade estar\u00e1 em \u00f3tima forma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dicas de programa\u00e7\u00e3o para o modo escuro<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A renderiza\u00e7\u00e3o de e-mails \u00e9 o pesadelo da equipe de desenvolvimento. E, obviamente, n\u00e3o seria diferente com o modo escuro. Com cada cliente renderizando os e-mails em modo escuro de forma diferente, \u00e9 dif\u00edcil criar uma mensagem que tenha a mesma apar\u00eancia em todos os provedores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Junto a essas recomenda\u00e7\u00f5es universais de design, existem v\u00e1rias corre\u00e7\u00f5es na programa\u00e7\u00e3o que voc\u00ea pode usar para criar uma experi\u00eancia personalizada de modo escuro nos seus e-mails.\u00a0<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ative o modo escuro com meta tags e o seletor :root<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Use o c\u00f3digo <b><\/b> na tag <b><\/b> para avisar ao cliente de e-mail que o seu e-mail tem suporte para os modos claro e escuro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se o seu usu\u00e1rio tiver essa configura\u00e7\u00e3o aplicada no seu aplicativo de e-mail, as meta tags abaixo v\u00e3o garantir que o modo escuro seja ativado:\u00a0\u00a0<\/p>\n\n\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=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\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\n\n<p class=\"wp-block-paragraph\">O seletor :root vai permitir que o cliente de e-mail procure o estilo do esquema de cores que ele precisa sem ter que ler todos os estilos.<\/p>\n\n\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=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\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\n\n<h4 class=\"wp-block-heading\">Adicione estilos de modo escuro por meio da media query<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\nVoc\u00ea pode criar estilos CSS personalizados para determinar qual ser\u00e1 a apar\u00eancia dos diferentes elementos ao usar o modo escuro, como logotipos, cor da fonte, plano de fundo ou o texto dos links.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adicione essa media query ao seu bloco\u00a0<strong><\/strong>\u00a0para personalizar esses elementos com os valores de cor de prefer\u00eancia da sua marca:<\/p>\n\n\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=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\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\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode adicionar isso \u00e0 se\u00e7\u00e3o\u00a0<strong><\/strong>\u00a0do seu e-mail para criar estilos personalizados de modo escuro para iOS, Apple Mail e algumas vers\u00f5es do Outlook.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adicione as classes e estilos corretos aos seus elementos espec\u00edficos de modo escuro<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea tiver vers\u00f5es claras e escuras de determinados elementos, como imagens, ser\u00e1 preciso garantir que os estilos criados para ambos os modos apare\u00e7am quando devem. Isso \u00e9 especialmente importante se voc\u00ea tem op\u00e7\u00f5es claras e escuras para o seu logotipo e quer alternar entre elas, dependendo de o destinat\u00e1rio usar o modo escuro ou n\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a0Um exemplo de como isso ficaria no seu HTML est\u00e1 abaixo:<\/p>\n\n\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=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\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\n\n<p class=\"wp-block-paragraph\">Nem todas essas corre\u00e7\u00f5es funcionar\u00e3o em todos os clientes e, por mais que a gente tente, nossos e-mails no modo escuro poder\u00e3o acabar com uma apar\u00eancia um pouco diferente em cada aplicativo e provedor. Se quiser ter certeza, teste a renderiza\u00e7\u00e3o do seu e-mail antes de enviar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dicas finais antes de enviar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O modo escuro de e-mail se tornou um recurso popular desde a sua cria\u00e7\u00e3o. Voc\u00ea deve se preparar para otimizar os e-mails para a sua lista de contatos se quiser gerar engajamento com eles e manter uma entregabilidade saud\u00e1vel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui est\u00e3o algumas dicas f\u00e1ceis para voc\u00ea lembrar na hora de fazer envios no modo escuro:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Escolha imagens e logotipos que se destaquem tanto no modo claro quanto no modo escuro.<\/li>\n\n\n\n<li>Sempre que poss\u00edvel, use imagens transparentes e sem fundo.<\/li>\n\n\n\n<li>Adicione um contorno branco para destacar fontes, logotipos e imagens escuras.<\/li>\n\n\n\n<li>Se isso fizer sentido para os seus contatos, considere enviar e-mails em texto simples para sua lista visando ter uma exibi\u00e7\u00e3o autom\u00e1tica e sem complica\u00e7\u00f5es.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Acima de tudo, ser\u00e1 preciso <b>testar seus e-mails antes de enviar<\/b>. O mundo do e-mail est\u00e1 sempre mudando, e o modo escuro tamb\u00e9m, ent\u00e3o certifique-se de testar seus e-mails nos clientes de e-mail mais populares das suas listas. Voc\u00ea pode fazer isso manualmente ou usando ferramentas de teste de e-mail como <a href=\"https:\/\/www.litmus.com\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Litmus<\/a> ou <a href=\"https:\/\/www.emailonacid.com\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Email on Acid<\/a>.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos encarar os fatos. Isso pode lhe causar algumas dores de cabe\u00e7a e at\u00e9 criar uma certa bagun\u00e7a, mas o lado escuro n\u00e3o vai a lugar nenhum. O modo escuro de e-mail definitivamente tem suas vantagens quando se trata de entregabilidade e acessibilidade, ent\u00e3o chegou a hora de simplesmente adot\u00e1-lo. Al\u00e9m disso, voc\u00ea <i>realmente<\/i> n\u00e3o precisa do Darth Vader, do Sauron ou de uma visita ao nono c\u00edrculo do inferno para fazer isso direito.<\/p>\n\n\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                    Mantenha-me informado! Receba \u00f3timos recursos em sua caixa de entrada toda semana.                <\/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-5178\" class=\"form-check-input\"\r\n                                        type=\"checkbox\" name=\"terms\">\r\n                                    <label for=\"formSubscriptionAcceptance-terms-5178\" class=\"form-check-label text-body-color\">\r\n                                        I have read and agree to the Terms of Service.                                        <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-6662\" class=\"form-check-input\"\r\n                                        type=\"checkbox\" name=\"privacy\">\r\n                                    <label for=\"formSubscriptionAcceptance-privacy-6662\" class=\"form-check-label text-body-color\">\r\n                                        I have read and agree to the Privacy Policy.                                        <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                            Envie-me a newsletter da Mailjet. Eu concordo expressamente em receber a newsletter e sei que posso cancelar a inscri\u00e7\u00e3o facilmente a qualquer momento.                        <\/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                    Verifique sua caixa de entrada mensalmente para receber sua newsletter da Mailjet!                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <\/div>\r\n    <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Descubra o que \u00e9 o modo escuro, por que os usu\u00e1rios o preferem e como ele pode ajudar sua entregabilidade.<\/p>\n","protected":false},"author":27,"featured_media":4074,"menu_order":0,"template":"","meta":{"_acf_changed":true,"footnotes":""},"blog_category":[20],"class_list":["post-20692","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>Tudo o que voc\u00ea precisa saber sobre o modo escuro de e-mail - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"Descubra o que \u00e9 o modo escuro e por que os usu\u00e1rios o adoram. Aprenda a otimiz\u00e1-lo para clientes de e-mail e como ele pode ajudar a sua entregabilidade.\" \/>\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\/pt\/blog\/email\/email-dark-mode\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tudo o que voc\u00ea precisa saber sobre o modo escuro de e-mail - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"Descubra o que \u00e9 o modo escuro e por que os usu\u00e1rios o adoram. Aprenda a otimiz\u00e1-lo para clientes de e-mail e como ele pode ajudar a sua entregabilidade.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/\" \/>\n<meta property=\"og:site_name\" content=\"Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-15T04:47:27+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\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/\",\"name\":\"Tudo o que voc\u00ea precisa saber sobre o modo escuro de e-mail - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/#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-15T04:47:27+00:00\",\"description\":\"Descubra o que \u00e9 o modo escuro e por que os usu\u00e1rios o adoram. Aprenda a otimiz\u00e1-lo para clientes de e-mail e como ele pode ajudar a sua entregabilidade.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/#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\\\/pt\\\/blog\\\/email\\\/email-dark-mode\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/inicio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O b\u00e1sico do modo escuro de e-mail\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Poderosas APIs de e-mail transacional que permitem a voc\u00ea enviar, receber e rastrear e-mails, criadas com os desenvolvedores em mente. Saiba mais hoje mesmo!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#\\\/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\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tudo o que voc\u00ea precisa saber sobre o modo escuro de e-mail - Transactional Email API Service For Developers | Mailgun","description":"Descubra o que \u00e9 o modo escuro e por que os usu\u00e1rios o adoram. Aprenda a otimiz\u00e1-lo para clientes de e-mail e como ele pode ajudar a sua entregabilidade.","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\/pt\/blog\/email\/email-dark-mode\/","og_locale":"pt_BR","og_type":"article","og_title":"Tudo o que voc\u00ea precisa saber sobre o modo escuro de e-mail - Transactional Email API Service For Developers | Mailgun","og_description":"Descubra o que \u00e9 o modo escuro e por que os usu\u00e1rios o adoram. Aprenda a otimiz\u00e1-lo para clientes de e-mail e como ele pode ajudar a sua entregabilidade.","og_url":"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","article_modified_time":"2026-09-15T04:47:27+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\/pt\/blog\/email\/email-dark-mode\/","url":"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/","name":"Tudo o que voc\u00ea precisa saber sobre o modo escuro de e-mail - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/#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-15T04:47:27+00:00","description":"Descubra o que \u00e9 o modo escuro e por que os usu\u00e1rios o adoram. Aprenda a otimiz\u00e1-lo para clientes de e-mail e como ele pode ajudar a sua entregabilidade.","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.mailgun.com\/pt\/blog\/email\/email-dark-mode\/#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\/pt\/blog\/email\/email-dark-mode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/pt\/inicio\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/pt\/blog\/"},{"@type":"ListItem","position":3,"name":"O b\u00e1sico do modo escuro de e-mail"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/pt\/#website","url":"https:\/\/www.mailgun.com\/pt\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Poderosas APIs de e-mail transacional que permitem a voc\u00ea enviar, receber e rastrear e-mails, criadas com os desenvolvedores em mente. Saiba mais hoje mesmo!","publisher":{"@id":"https:\/\/www.mailgun.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/pt\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.mailgun.com\/pt\/#\/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\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog\/20692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/users\/27"}],"version-history":[{"count":1,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog\/20692\/revisions"}],"predecessor-version":[{"id":20693,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog\/20692\/revisions\/20693"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/media\/4074"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/media?parent=20692"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog_category?post=20692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}