Como criar um modelo de e-mail no modo escuro

Um modo de e-mail escuro é um esquema de cores de e-mail que substitui uma cor de texto escura em um plano de fundo claro por uma cor de texto clara em um plano de fundo escuro.

Muitos usuários preferem o modo escuro porque:

  • reduz a fadiga ocular, especialmente em condições de pouca luz;
  • é melhor percebido por pessoas com problemas de visão;
  • economiza a energia da bateria dos dispositivos.

Neste artigo, veremos como configurar um modo escuro para um modelo no editor SendPulse, falaremos sobre quais clientes de e-mail oferecem suporte à personalização e exploraremos como um usuário percebe um modo escuro.

Como um usuário vê o modo escuro

Existem dois tipos de esquemas de cores de modo escuro usados por clientes de e-mail:

  • Mudança parcial na cor — o cliente de e-mail detecta o e-mail com uma cor de fundo clara e a transforma em uma cor escura, ao mesmo tempo em que altera a cor do texto escuro para uma cor clara. Os planos de fundo que eram inicialmente escuros e usavam uma cor de texto clara permanecerão inalterados. Os clientes de e-mail que usam esse tipo de esquema de cores são compatíveis com uma configuração personalizada de modo escuro.
  • Mudança completa de cor — o cliente de e-mail detecta o e-mail com uma cor de fundo clara e a transforma em uma cor escura, ao mesmo tempo em que altera a cor do texto para uma cor clara; um fundo escuro com uma cor de texto clara se transforma em um fundo claro com uma cor de texto escura. Os clientes de e-mail que usam esse tipo de esquema de cores não são compatíveis com configurações personalizadas de modo escuro.

Você pode ver como são os modos de e-mail claro e escuro na imagem abaixo.

Como configurar um modo escuro para seu modelo

Vá para "E-mail" > "Modelos de e-mail" e clique em Adicionar um modelo.

Em seguida, selecione "Editor HTML".

Saiba mais: Como trabalhar com um editor de HTML

Clique no ícone "Código-fonte".

Você pode adicionar seu código de e-mail na janela que se abre.

Para notificar os clientes de e-mail de que você está usando um modo escuro personalizado em um e-mail, dentro da <head> tag, adicione meta tags para suportar o esquema de cores:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Adicione a consulta @media dentro da tag <style> para definir um estilo personalizado. Você pode especificar a cor do plano de fundo ou do texto, o tipo de exibição do elemento e outras configurações.

A consulta @media é usada quando você deseja aplicar estilos diferentes a vários dispositivos com base no tipo de exibição, ambiente ou outras características do dispositivo.

O exemplo abaixo mostra as configurações de cor de fundo e corpo do texto para todo o e-mail no modo escuro:

@media (prefers-color-scheme: dark) {
   body {
      background-color: #808080;
      color: #FFF5EE;
   }
}

Duplique suas configurações de estilo personalizado com o prefixo [data-ogsc] ou [data-ogsb] dentro da tag <style>:

[data-ogsc] body {
   background-color: #808080;
   color: #FFF5EE;
}

Os prefixos [data-ogsc] e [data-ogsb] são usados para incluir estilos para modos diferentes nas tags de bloco de e-mail.

Saiba mais: Lista de atributos CSS e HTML suportados.

Em seguida, na tag <body>, adicione a marcação do seu e-mail.

Salve o modelo e use-o em suas campanhas.

Saiba mais: Como enviar uma campanha de e-mail.

Quais clientes de e-mail suportam o modo escuro

Vamos dar uma olhada em quais clientes de e-mail suportam um modo escuro personalizado usando as consultas @media e [data-ogsc] ou [data-ogsb] prefixos.

Cliente de e-mail Apoiando @media Suporte para [data-ogsc] e [data-ogsb]
IOS
Apple Mail + -
Gmail - -
Outlook + -
meuMail - -
Android
Gmail - -
Outlook - +
Yandex - -
Mail.ru + -
macOS
Outlook + -
Apple Mail + -
Windows
Outlook - -
Web-applications
Outlook.com + Partially
Gmail - -
Yandex - -
Mail.ru + -
    Rate this article about "Como criar um modelo de e-mail no modo escuro"

    User Rating: 4 / 5

    Anterior

    Como editar imagens no criador de modelos

    Próximo

    Como adicionar um botão de pagamento a um e-mail

    Popular em nosso blog

    Teste o serviço de e-mails do SendPulse gratuitamente