---
url: "/pt/emailify/design/dark-mode.md"
description: "Os ajustes de modo escuro só funcionam nos apps Apple Mail do iOS/MacOS (Gmail, Outlook etc. _não são compatíveis_ com ajustes de modo escuro)."
---

# Ajustes de modo escuro (só no Apple Mail no iOS/MacOS)

> Os ajustes de modo escuro só funcionam nos apps Apple Mail do iOS/MacOS (Gmail, Outlook etc. _não são compatíveis_ com ajustes de modo escuro).

> **Warning:** A [compatibilidade com estilos de ajuste de modo escuro](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/uAxQ5Psi1m4)

## Pontos importantes ao criar designs para o modo escuro {#important-design-considerations-for-dark-mode}

![Compatibilidade dos clientes de e-mail com CSS de modo escuro](/assets/images/emailify/caniemail-dark-mode.jpg)

> **Warning:** A [compatibilidade com estilos de ajuste de modo escuro](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

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](https://www.campaignmonitor.com/blog/email-marketing/designing-an-email-for-dark-mode-dark-and-light-optimization/) e da [Litmus](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)) 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 {#applying-dark-mode-color-overrides}

[Video](/assets/videos/emailify/design/dark-mode-color-override.mp4)

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](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) com esse recurso (apps Apple Mail do iOS/MacOS) quando o e-mail é aberto em um dispositivo com o modo escuro ativado.

> **Warning:** A [compatibilidade com estilos de ajuste de modo escuro](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

## Alternar entre duas camadas de imagem nos modos escuro e claro {#swapping-between-two-image-layers-in-dark-and-light-mode}

[Video](/assets/videos/emailify/design/swap-dark-mode-content.mp4)

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](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) com esse recurso (apps Apple Mail do iOS/MacOS) quando o e-mail é aberto em um dispositivo com o modo escuro ativado.

> **Warning:** A [compatibilidade com estilos de ajuste de modo escuro](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

## Pré-visualizar o modo escuro no plugin {#previewing-dark-mode-in-the-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.

> **Warning:** 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 {#testing-your-emails-in-dark-mode}

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/h5Gq9apZrxk)

Vale sempre a pena testar seus próprios e-mails com um serviço como o [Litmus](https://www.litmus.com/) ou o [Email on Acid](https://www.emailonacid.com/) para garantir que estejam com uma boa aparência antes de enviá-los.

> **Warning:** A [compatibilidade com estilos de ajuste de modo escuro](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

> **Tip:** Você pode [aplicar configurações em massa](/pt/emailify/design/settings#apply-settings-in-bulk) 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.