---
# System prepended metadata

title: Dark Mode em emails

---

# Dark Mode em emails

Dark Mode é um assunto que ganhou bastante relevância em 2018, e boa parte dessa relevância foi por conta do lançamento dessa funcionalidade em dispositivos Android e IOS nativamente.

E por esse motivo de popularização do modo escuro que desenvolvi essa pequena documentação de boas práticas. Por ConectCar demandar muito desenvolvimento de e-mail markerting, inicialmente é uma documentação que foca em desenvolvimento de e-mails apenas.

### Como os clients de e-mail suportam Dark Mode

Cada cliente de email se comporta de uma maneira. Essa imagem [aqui](https://miro.medium.com/max/3218/1*myGYuxweOC4SgmHKzq5nnA.png) lista exatamente o que cada um suporta.

Alguns invertem as cores (de claro => escuro e de escuro => claro) baseados em condições e outros ignoram condições e forçam a inversão. Na imagem citada anteriormente é mostrada essas condições.

**Apple Mail** e **Gmail** que representam quase 64% dos usuários, invertem as cores para Dark Mode se o `background-color` do e-mail for transparente.

**Outlook** e alguns outros menores forçam a inversão, ou seja, mesmo que colocado no código todas as configurações de **color** e **background-color**, ele irá sobrescrever colocando inline as regras CSS e com **!important** e nada é mais forte que isso.



### Boas práticas de Código

* Use `prefers-color-scheme` em media queries mas verifique o suporte
* Faça a configuração de `color` e `background-color` em textos e wrappers respectivamente.


### Boas práticas de Design

* Evitar misturar cores de background com imagens
* Usar imagens transparentes
* Durante a concepção da interface, já pensar sobre a inversão de cores entre background e foreground

### Referências e textos legais

Encontrei esses textos sobre o tema e que explicam mais como implementar isso, desde o Design até o código:


#### Sobre Dark Mode:

*  https://uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6


#### Sobre Dark Mode em e-mail marketing:

*  https://medium.com/swlh/dark-mode-in-html-email-everything-you-need-to-know-57b2647bf304 (Recomendo muito a leitura!)

*  https://www.campaignmonitor.com/blog/email-marketing/2019/10/designing-an-email-for-dark-mode-dark-and-light-optimization/