# 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/