Modo escuro para conteúdo de email dark-mode
Modo escuro permite que um cliente ou aplicativo de email de suporte exiba emails com planos de fundo mais escuros e cores mais claras para texto, botões e outros elementos visuais. Esse tipo de monitor pode reduzir a tensão ocular, economizar bateria e melhorar a legibilidade em ambientes com pouca luminosidade, proporcionando uma experiência de visualização mais confortável. Como uma tendência crescente nos principais sistemas operacionais e aplicativos, agora é uma consideração importante no design de email moderno para garantir que o conteúdo permaneça legível e visualmente atraente para todos os usuários.
À medida que você cria seu conteúdo de email no espaço de design visual do Journey Optimizer B2B Edition, é possível alternar para o modo de exibição Escuro . Nesta visualização, também é possível definir configurações personalizadas específicas para oferecer suporte a clientes de email quando o modo escuro estiver ativado.
Considerações do cliente de email
Há uma variação significativa na maneira como diferentes clientes de email e aplicativos aplicam o modo escuro. Por isso, você deve considerar as expectativas para a renderização no modo escuro com cuidado. Antes de usar o modo escuro no espaço de design de email, considere os seguintes casos de uso de cliente de email:
Alguns clientes de email não oferecem suporte a esse recurso, como:
- Yahoo! Mail
- AOL
Se você definir configurações personalizadas de modo escuro no design de email, esses clientes de email não poderão exibir nenhuma renderização de modo escuro.
Alguns clientes de email aplicam sistematicamente seu próprio modo escuro padrão a todos os emails recebidos. Eles ajustam automaticamente cores, planos de fundo, imagens e outros elementos de acordo com suas configurações de modo escuro e configurações externas não são possíveis. Esses clientes incluem:
- Gmail (Desktop Webmail, iOS, Android™, Mobile Webmail)
- Outlook Windows
- Outlook Windows Mail
In this case, the client dark mode settings override the custom dark mode settings that you define in Journey Optimizer B2B Edition
Many of the most popular email clients offer the option to render custom dark mode with the @media (prefers-color-scheme: dark) query, which is the method used by the Journey Optimizer B2B Edition email styles. This list of clients includes:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
In this case, the specific settings you define in the Journey Optimizer B2B Edition are rendered. However, some restrictions could apply according to each email client. For example, some clients (such as Apple Mail 16 (macOS 13)) do not generate dark mode if images are present in the email content.
For optimal results, test your content with the email clients that you are targeting. To see a simulation that comes as close as possible to the final result for each client, use the Litmus email test rendering integration in the email design space.
Design for dark mode
As you style your email content for dark mode in Journey Optimizer B2B Edition, the visual design space provides two types of tools:
-
Use the preview function to review the default dark mode rendering for most supporting email clients.
-
If you want to override the default settings of supporting email clients, define and apply custom dark mode settings to your email content. Learn more
Visualizar modo escuro padrão preview-dark-mode
-
Open the email content in the email design space.
Na parte superior direita da tela de desenho, há um seletor de claro-escuro que alterna a exibição do conteúdo entre o modo claro (padrão) e escuro.
-
Altere o seletor para Modo escuro (
A tela de desenho exibe o conteúdo usando o modo escuro padrão preview.x
Por padrão, a visualização do modo escuro aplica o esquema de cores
full color inverta todos os elementos, exceto imagens e ícones. Esse esquema de cores detecta áreas com elementos claros e escuros e os inverte. Os planos de fundo claros se tornam escuros e o texto escuro se torna claro, ou os planos de fundo escuros se tornam claros e o texto claro se torna escuro.
Definir configurações personalizadas do modo escuro custom-dark-mode
Depois de alternar para o modo escuro, você pode optar por editar elementos de estilo específicos do seu conteúdo, que são exibidos somente quando o modo escuro está ativado no cliente de email do recipient (desde que seja compatível com esse recurso).
O estilo de modo escuro personalizado no espaço de design de email usa o Consulta CSS @media (prefers-color-scheme: dark), que detecta se o cliente de email está definido para o modo escuro e aplica o design de tema escuro definido no seu email.
Para definir configurações personalizadas do modo escuro :
-
Se necessário, mova o seletor para Modo escuro (
-
Edite quaisquer atributos de cor de estilo, como texto, planos de fundo ou botões.
-
Para as imagens e ícones, defina ativos específicos somente para o modo escuro.
Não é possível alterar as cores das imagens e dos ícones, mas você pode definir ativos alternativos a serem usados no modo escuro. Você pode experimentar diferentes combinações de cores para seus ícones ou fazer ajustes de cores e saturação para imagens fotográficas.
Select any image and switch to Dark mode using the dedicated toggle in the Settings pane. Then, select a different image asset.
See Add image assets for more information about selecting an image asset.
-
At any point during your design changes, select Switch to live view to check how your content might render on various device sizes.
From this view, change the selector to Dark mode (
note caution CAUTION The live view is a generic preview designed to compare how the rendering might look across various device sizes. The final rendering could vary depending on the recipient's email client. -
When your dark mode changes are complete, click Simulate Content.
Use the preview and proofing tools to test your email design. See Preview and test your email content for more information.
-
If you have a Litmus Enterprise account, select Render email to see the final dark mode rendering for various email clients in the Litmus .
See Test email rendering with Litmus for more information.
note caution CAUTION While simulation closely approximates how emails appear in dark mode, actual rendering could differ due to variations in email service providers or device-level settings.
Práticas recomendadas best-practices
As dark mode adoption increases across major email clients, it is essential to consider how your emails render in both light and dark environments - whether you are using custom dark mode or not.
Dark mode can alter colors, backgrounds, and images — sometimes overriding design choices. To ensure visual consistency, accessibility, and brand integrity, follow these best practices:
Checklist:
- Save logos and icons as PNG files with transparent backgrounds to avoid visible white boxes in dark mode.
- Avoid images with hardcoded white or light backgrounds.
- Se a transparência não for uma opção, coloque as imagens em um plano de fundo sólido no design para evitar inversões de cores estranhas.
Lista de verificação:
- Verifique se há contraste suficiente entre o texto e as cores do plano de fundo para facilitar a leitura nos modos claro e escuro.
- Evite depender apenas das cores do plano de fundo para o conteúdo crítico. Alguns clientes substituem as cores do plano de fundo no modo escuro, portanto, verifique se as informações principais ainda estão visíveis.
Lista de verificação:
- Use combinações de cores fáceis de distinguir para pessoas com daltonismo.
- Use uma paleta de tons médios para garantir o contraste em planos de fundo claros e escuros.
- Use combinações de cores acessíveis com alto contraste para melhorar a legibilidade e atender aos padrões do Web Content Accessibility Guidelines (WCAG). Use ferramentas como o WebAIM Contrast Checker para verificar o contraste de cores.
- Evite fontes finas, pois isso pode afetar a legibilidade. Se sua marca requer uma fonte fina, coloque-a em negrito no modo escuro.
- Ignorar branco puro em preto puro, o que pode causar tensão ocular e pode ser invertido automaticamente em alguns clientes de email.
- Fornecer estilo de fallback acessível se o modo escuro não for compatível.
Lista de verificação:
- Use a visualização de modo escuro no espaço de design de email, que usa esquemas de cores invertidas para detectar problemas antecipadamente.
- Use uma conta Litmus Enterprise com a opção Renderizar email para simular seus designs nos principais clientes de email (como Apple Mail, Gmail e Outlook) e ver como as cores e as imagens se comportam no modo escuro.