A compatibilidade com estilos de ajuste de modo escuro nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS, ou seja, os ajustes de modo escuro não funcionam em outros clientes, como Gmail, Outlook etc. Tenha isso em mente e procure criar seus e-mails pensando em aprimoramento progressivo.

Vídeo tutorial: adicionar estilos de modo escuro a designs de e-mail HTML

Este vídeo mostra como adicionar ajustes de estilo personalizados de modo escuro aos seus designs de e-mail para exportar do Figma e-mails HTML responsivos e prontos para produção com o plugin Emailify.

Pontos importantes ao criar designs para o modo escuro

A compatibilidade com estilos de ajuste de modo escuro nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS, ou seja, os ajustes de modo escuro não funcionam em outros clientes, como Gmail, Outlook etc. Tenha isso em mente e procure criar seus e-mails pensando em aprimoramento progressivo.

Como cada cliente de e-mail tem a própria implementação, é muito difícil criar designs para o modo escuro, mas vale a pena tentar trabalhar a favor das mudanças (muitas vezes péssimas) que cada cliente aplica automaticamente no modo escuro.

Um bom ponto de partida é consultar alguns materiais (como estes artigos da CampaignMonitor e da Litmus) que explicam exatamente o que esses clientes de e-mail mudam e como reduzir parte dessas mudanças no design.

Aplicar ajustes de cor no modo escuro

Selecione um elemento, como uma camada de texto, uma imagem, um Button, uma Row, uma Column ou um Wrapper, e clique no botão Settings no cabeçalho do plugin. Você pode definir as cores de texto e de fundo do modo escuro na seção Dark Mode Overrides, na parte de baixo do painel Settings.

Nas camadas Button, Row, Column e Wrapper, você também pode definir um ajuste de Border Color. Ele muda a cor da borda no modo escuro sem alterar a espessura nem o estilo da borda usados no modo claro.

Esses ajustes aparecem nos clientes de e-mail compatíveis com esse recurso (apps Apple Mail do iOS/MacOS) quando o e-mail é aberto em um dispositivo com o modo escuro ativado.

A compatibilidade com estilos de ajuste de modo escuro nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS, ou seja, os ajustes de modo escuro não funcionam em outros clientes, como Gmail, Outlook etc. Tenha isso em mente e procure criar seus e-mails pensando em aprimoramento progressivo.

Alternar entre duas camadas de imagem nos modos escuro e claro

Você também pode trocar determinadas camadas de imagem no modo escuro. Clique na sua camada de conteúdo do Figma (dentro de uma camada Column), clique no botão Settings no cabeçalho do plugin e ative a opção Only Hide in Dark Mode ou Only Show in Dark Mode, conforme você queira mostrar ou ocultar a camada de imagem nos clientes de e-mail compatíveis com esse recurso (apps Apple Mail do iOS/MacOS) quando o e-mail é aberto em um dispositivo com o modo escuro ativado.

A compatibilidade com estilos de ajuste de modo escuro nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS, ou seja, os ajustes de modo escuro não funcionam em outros clientes, como Gmail, Outlook etc. Tenha isso em mente e procure criar seus e-mails pensando em aprimoramento progressivo.

Pré-visualizar o modo escuro no plugin

Abra a pré-visualização (Preview) e ative a opção Dark Mode na barra de ferramentas da HTML Preview. Continue usando o seletor de largura da pré-visualização se quiser comparar o mesmo design no modo escuro em larguras de desktop ou de celular. O Dark Mode não fica disponível enquanto a visualização híbrida combinada Desktop & Mobile estiver selecionada.

A pré-visualização local usa um tratamento automático e genérico de modo escuro e ativa os estilos prefers-color-scheme do e-mail. Os ajustes de cor dela servem como referência aproximada e não simulam nenhum cliente de e-mail específico. Se o e-mail tiver ajustes de modo escuro do Emailify, use a opção Overrides, ao lado, para mostrar ou ocultar os estilos explícitos de fundo, texto, borda e troca de imagem.

Essa opção é uma ajuda para o design, não um emulador de cliente ou de dispositivo. Ela não reproduz sanitizadores autenticados, mecanismos de renderização e fontes nativos, a interface dos apps, o processamento na entrega nem todas as diferenças entre clientes e versões.

Testar seus e-mails no modo escuro

Vídeo tutorial: testar no modo escuro e-mails HTML exportados do Figma

Este vídeo mostra como testar no modo escuro e-mails HTML exportados do Figma com o plugin Emailify e o Litmus.com.

Vale sempre a pena testar seus próprios e-mails com um serviço como o Litmus ou o Email on Acid para garantir que estejam com uma boa aparência antes de enviá-los.

A compatibilidade com estilos de ajuste de modo escuro nos clientes de e-mail se limita ao Apple Mail no iOS/MacOS, ou seja, os ajustes de modo escuro não funcionam em outros clientes, como Gmail, Outlook etc. Tenha isso em mente e procure criar seus e-mails pensando em aprimoramento progressivo.

Você pode aplicar configurações em massa abrindo Settings e selecionando no Figma várias camadas do Emailify do mesmo tipo. Qualquer configuração que você alterar será aplicada a todas as camadas selecionadas.