Como usar CSS personalizado para personalizar o aspeto do meu e-mail no modo escuro?

Podes usar o CSS personalizado no editor de e-mails para alterar as cores dos botões e das secções, ajustar o fundo da mensagem e manter os logótipos visíveis no modo escuro. Também podes manter as cores selecionadas do teu design no modo claro.

Podes começar com as opções básicas do modo escuro ao preparares o teu e-mail. Se a tua mensagem ainda precisar de ajustes — por exemplo, se um logótipo ficar difícil de ver ou se as cores dos botões perderem contraste —, podes usar o CSS personalizado para afinar a sua aparência.

Os exemplos neste artigo têm comentários entre /* e */. Estes explicam para que serve cada grupo de regras. Podes deixar os comentários quando copiares o código; eles não afetam o funcionamento do código.

Alguns exemplos incluem vários grupos de regras porque as aplicações de e-mail suportam técnicas diferentes:

  • @media (prefers-color-scheme: dark) aplica estilos do modo escuro em aplicações que suportam esta consulta de mídia.
  • [data-ogsc] e [data-ogsb] fornecem regras adicionais para o modo escuro em algumas aplicações do Outlook.
  • background-image: linear-gradient(...) ajuda a preservar as cores de fundo nas aplicações do Gmail.

Mantém o !important nos exemplos para que as regras possam substituir as cores definidas pelo editor. Mantém as classes de bloco nos seletores para que os teus estilos atinjam os elementos pretendidos.

Os códigos de cor são exemplos. Ao preservar uma cor, usa a cor exata do teu design no modo claro. Se mais tarde alterares essa cor no editor, atualiza também o CSS.

O que preciso antes de adicionar estilos personalizados para o modo escuro

Precisas de ter acesso ao CSS personalizado e de ter algum conhecimento de CSS. Consulta Como usar a opção CSS personalizado no editor de e-mail?.

Tens de ativar o CSS Personalizado para cada bloco que queiras personalizar. Sem isso, a classe CSS do bloco não é adicionada ao e-mail enviado, pelo que os estilos personalizados não se aplicam. Isto também se aplica quando adicionas o código a toda a mensagem.

Adicionar CSS personalizado a um bloco

Para preparar um bloco:

  1. Seleciona o botão, a secção ou a imagem que queres personalizar.
  2. Ativa a opção Adicionar CSS personalizado no painel à direita.
  3. No campo CSS, escreve .elem para veres a classe do bloco selecionado.
  4. Copia a classe e usa-a para substituir todos os .elem-ID no exemplo que escolheste.
Adição de CSS personalizado a um bloco de imagem, com o parâmetro . elem visível no bloco.

Por exemplo, substitui .elem-ID por uma classe como .elem-image-5dc6501190a6. A classe será diferente para cada bloco.

Adicionar CSS personalizado a toda a mensagem

Para aplicar estilos do modo escuro a toda a tua mensagem:

  1. Abre o Estilo da mensagem.
  2. Expande CSS personalizado.

    Adicionar estilos CSS personalizados a toda a mensagem no separador "Estilo da mensagem", dentro do editor de mensagens.

  3. Adiciona este código uma vez por mensagem, antes das outras regras. Isto declara o suporte tanto para esquemas de cores claras como escuras. Testa o resultado em todas as aplicações de e-mail que os teus destinatários usam.
:root {
 color-scheme: light dark;
 supported-color-schemes: light dark;
}

Como alterar as cores dos botões no modo escuro

Adiciona o código seguinte ao CSS personalizado do botão. Substitui cada .elem-ID pela classe do botão.

Este exemplo usa um fundo laranja claro e texto escuro nas aplicações de e-mail compatíveis. 

1/* Dark mode styles for apps that support this media query,
2   including supported versions of Apple Mail, Outlook, and Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID table td,
5  .elem-ID a,
6  .elem-ID p {
7    background-color: #FFB27A !important;
8  }
9
10  .elem-ID a,
11  .elem-ID p {
12    color: #1A1A1A !important;
13  }
14}
15
16/* Additional background rules for Outlook.com and Outlook mobile apps */
17[data-ogsb] .elem-ID table td,
18[data-ogsb] .elem-ID a,
19[data-ogsb] .elem-ID p {
20  background-color: #FFB27A !important;
21}
22
23/* Additional text rules for Outlook.com and Outlook mobile apps */
24[data-ogsc] .elem-ID a,
25[data-ogsc] .elem-ID p {
26  color: #1A1A1A !important;
27}

Mantém os seletores a e p. Eles abrangem botões com e sem link. As regras que começam por[data-ogsb] e [data-ogsc] oferecem suporte adicional em algumas aplicações do Outlook.

Como manter as cores originais do botão

Usa o mesmo exemplo, mas substitui:

  • #FFB27A pela cor de fundo do botão no modo claro.
  • #1A1A1A pela cor do texto do botão no modo claro.

Para ajudar a preservar o fundo nas aplicações do Gmail, adiciona também esta regra. Substitui ambas as ocorrências de #FF6600 pela cor de fundo do teu botão no modo claro:

.elem-ID table td,
.elem-ID a,
.elem-ID p {
 background-image: linear-gradient(#FF6600, #FF6600) !important;
}

Como alterar as cores das secções no modo escuro

Adiciona este código ao CSS personalizado da secção e substitui cada .elem-ID pela classe da secção:

1/* Dark mode styles for apps that support this media query,
2   including supported versions of Apple Mail, Outlook, and Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID,
5  .elem-ID > table {
6    background-color: #1E1E1E !important;
7  }
8
9  .elem-ID div > p,
10  .elem-ID div > h1,
11  .elem-ID div > h2,
12  .elem-ID div > h3,
13  .elem-ID li {
14    color: #F2F2F2 !important;
15  }
16}
17
18/* Additional background rules for Outlook.com and Outlook mobile apps */
19[data-ogsb] .elem-ID,
20[data-ogsb] .elem-ID > table {
21  background-color: #1E1E1E !important;
22}
23
24/* Additional text rules for Outlook.com and Outlook mobile apps */
25[data-ogsc] .elem-ID div > p,
26[data-ogsc] .elem-ID div > h1,
27[data-ogsc] .elem-ID div > h2,
28[data-ogsc] .elem-ID div > h3,
29[data-ogsc] .elem-ID li {
30  color: #F2F2F2 !important;
31}

Este exemplo dá à secção um fundo escuro e texto claro. Abrange secções padrão e de largura total, mantendo os botões dentro da secção com as suas próprias cores.

As colunas com as suas próprias cores de fundo precisam de regras separadas. Os fragmentos de texto com cores atribuídas individualmente podem continuar a ser tratados pela aplicação de e-mail.

Como manter as cores do modo claro da secção

Usa o mesmo exemplo, mas substitui:

  • #1E1E1E pela cor de fundo do modo claro da secção.
  • #F2F2F2 pela cor do texto do modo claro da secção.

Define ambas as cores em conjunto. Se preservares apenas um fundo claro, podes acabar com texto claro sobre um fundo claro, caso a aplicação de e-mail altere a cor do texto.

Não apliques a técnica de gradiente do Gmail a uma secção com texto escuro sobre um fundo claro. O Gmail pode clarear o texto enquanto o gradiente mantém o fundo claro, tornando o conteúdo difícil de ler.

Como alterar o fundo da mensagem no modo escuro

Adiciona este exemplo ao CSS personalizado de toda a mensagem, abaixo da configuração ao nível da mensagem:

1/* Change the message background in apps that support this media query */
2@media (prefers-color-scheme: dark) {
3  body,
4  .elem-body {
5    background-color: #121212 !important;
6  }
7}
8
9/* Additional background rule for Outlook.com and Outlook mobile apps */
10[data-ogsb] .elem-body {
11  background-color: #121212 !important;
12}

Isto altera o fundo à volta das tuas secções nas aplicações de e-mail compatíveis. As secções com fundos próprios precisam dos seus próprios estilos.

Deixa o .elem-body como está. É a classe real da mensagem, e não um espaço reservado.

Para manter o fundo original da mensagem, substitui #121212 pela cor do modo claro. Isto não vai impedir que todas as aplicações de e-mail alterem o fundo.

Como manter um logótipo escuro visível

Um logótipo escuro com fundo transparente pode tornar-se difícil de ver quando a área por trás dele fica escura. Podes adicionar um fundo claro por trás da imagem.

Adiciona este código ao CSS personalizado do bloco de imagem e substitui cada .elem-ID pela classe do bloco de imagem:

1/* Add a light background in apps that support this media query */
2@media (prefers-color-scheme: dark) {
3  .elem-ID img {
4    background-color: #FFFFFF !important;
5  }
6}
7
8/* Additional background rule for Outlook.com and Outlook mobile apps */
9[data-ogsb] .elem-ID img {
10  background-color: #FFFFFF !important;
11}
12
13/* Gmail apps: preserve the background behind the image.
14   This rule also applies in light mode. */
15.elem-ID img {
16  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
17}

Substitui o #FFFFFF por toda a parte pela cor de fundo do modo claro da secção. O gradiente ajuda a manter esse fundo nas aplicações do Gmail e também funciona no modo claro.

Uma imagem que já tenha um fundo sólido, como um JPG, normalmente não precisa deste ajuste.

Como usar uma imagem diferente no modo escuro

Também podes usar uma imagem separada concebida para fundos escuros. A técnica seguinte tem suporte limitado e destina-se a aplicações de e-mail baseadas no WebKit, como o Apple Mail.

Cola isto no CSS personalizado do bloco de imagem:

@media (prefers-color-scheme: dark) {
 .elem-ID img {
   content: url("https://example.com/logo-dark.png") !important;
 }
}

Substitui .elem-ID pela classe do bloco de imagem e o URL de exemplo pelo URL da tua imagem para o modo escuro.

Usa uma imagem com as mesmas proporções que a original. Certifica-te de que a original continua a poder ser utilizada em ambos os modos, já que outras aplicações de e-mail podem continuar a exibi-la.

Por que é que os estilos ficam diferentes nos diferentes aplicativos de e-mail

As aplicações de e-mail lidam com o modo escuro de formas diferentes. Os comentários nos exemplos descrevem a utilização pretendida de cada técnica; não garantem compatibilidade em todas as versões de uma aplicação.

Aplicação de e-mailO que esperar
Apple Mail, aplicações Outlook compatíveis no macOS e Samsung EmailPodem aplicar-se regras de media query para o modo escuro. Testa a aplicação e a versão específicas.
Outlook.com e aplicações do Outlook no iOS e no AndroidPodes ter ajuda com regras adicionais específicas do Outlook, mas o suporte varia.
Aplicações do GmailOs gradientes podem preservar os fundos selecionados, mas as cores do texto podem continuar a mudar. Os exemplos de alteração de cor no modo escuro não se aplicam.
Outlook para WindowsEstes exemplos não conseguem controlar de forma fiável as alterações de cor do modo escuro do próprio aplicativo.
Yahoo e AOLAs regras de media query para o modo escuro usadas aqui não são suportadas.
Aplicações que removem estilos incorporadosO CSS personalizado pode ser totalmente ignorado.

E se o Gmail ignorar um fragmento de código?

Tenta mover as regras específicas do Outlook — aquelas que começam por [data-ogsc] ou [data-ogsb] — para o CSS personalizado de toda a mensagem, mantendo-as separadas das outras regras do bloco.

Mantém o CSS personalizado ativado no bloco em questão e inclui a sua classe em todos os seletores.

Resolução de problemas

Se nenhum dos estilos for aplicado, verifica se:

  • O CSS personalizado esteja ativado em todos os blocos em questão.
  • Todos os .elem-ID foram substituídos pela classe de bloco correta.
  • O .elem-body não tenha sido alterado nas regras de fundo da mensagem.
  • A aplicação de e-mail do destinatário suporta a técnica que estás a usar.
  • Não estejas a combinar os exemplos com o modo claro forçado.

Antes de enviar a mensagem para a tua lista, não te esqueças de a testar.

  1. Verifica o design tanto no modo claro como no modo escuro.
  2. Envia mensagens de teste para as aplicações de e-mail e os dispositivos que os teus destinatários usam.
  3. Verifica o contraste do texto, os rótulos dos botões, a visibilidade do logótipo e os fundos em torno das secções.
  4. Confirma se o design original continua legível nos casos em que os estilos personalizados não são suportados.
  5. Repete os testes depois de alterares as cores ou as imagens.

Nota: A pré-visualização do modo escuro do editor não reproduz o comportamento de todas as aplicações de e-mail, e o CSS personalizado não é apresentado na pré-visualização padrão da mensagem.

Artigos relacionados

Recursos populares