Hantera innehåll i mörkt läge dark-mode

När du utformar dina e-postmeddelanden kan du växla till Journey Optimizer-vyn med 🔗e-post-Designer Dark mode.

I den här mörka vyn kan du även definiera specifika anpassade inställningar som ska visas av e-postklienter som stöder e-post när deras mörka läge är aktiverat.

Vad är mörkt läge? what-is-dark-mode

Det sätt som mörkt läge återges i de olika e-postklienterna är komplext. Låt oss först definiera mörkt läge.

I mörkt läge kan e-postklienter och appar som stöder e-post visa e-postmeddelanden med mörkare bakgrund och ljusare färger för text, knappar och andra gränssnittselement. Det gör det möjligt att minska ögonbelastningen, spara batteritid och förbättra läsbarheten i miljöer med svag belysning för en mer bekväm visningsupplevelse.

Som en allt större trend för större operativsystem och appar har det blivit en viktig faktor i modern e-postdesign för att säkerställa att innehållet förblir läsbart och visuellt tilltalande för alla användare.

Guardrails guardrails

Förväntningarna när det gäller återgivning i mörkt läge måste beaktas med försiktighet eftersom det sätt som används av olika e-postklienter kan variera mycket.

Innan du använder mörkt läge i e-post-Designer för Journey Optimizer är det viktigt att du förstår hur de viktigaste e-postklienterna hanterar det. Det finns tre olika fall att skilja mellan:

Klienter som inte stöder mörkt läge not-supporting

Vissa e-postklienter stöder inte den här funktionen alls, till exempel:

Vare sig du definierar anpassade inställningar för mörkt läge eller inte i e-post-Designer visas aldrig någon återgivning i mörkt läge för dessa e-postklienter.

Klienter som använder sitt eget mörka läge default-support

Vissa e-postklienter tillämpar systematiskt sitt eget mörka standardläge för alla e-postmeddelanden som tas emot. Färger, bakgrunder, bilder osv. justeras automatiskt med inställningar för mörkt läge som är specifika för e-postklienten, vilket innebär att ingen extern ändring är möjlig.

De här klienterna är till exempel:

I det här fallet, om du definierar anpassade mörkt läge-inställningar i e-post-Designer, åsidosätts dessa inställningar av e-postklientinställningarna.

Det är viktigt att förstå att dessa e-postklienter hanterar mörkt läge, men din specifika design för mörkt läge återges inte.

Klienter som stöder anpassat mörkt läge custom-support

Andra e-postklienter erbjuder alternativet att återge anpassat mörkt läge med frågan @media (prefers-color-scheme: dark), som är den metod som används av Designer-e-postmeddelandet i Journey Optimizer .

Här är en lista över de huvudklienter som hanterar det här alternativet:

I det här fallet ska de specifika inställningar som du anger i e-post-Designer visas.

Vissa begränsningar kan dock gälla för varje e-postklient. Vissa klienter, till exempel Apple Mail 16 (macOS 13), kommer inte att generera ett mörkt läge om det finns bilder i e-postinnehållet.

Testa innehållet med de e-postklienter du riktar in dig på för att få optimala resultat. Om du vill se en simulering som ligger så nära det slutliga resultatet som möjligt för varje klient använder du alternativet E-poståtergivning i e-post-Designer.

Mörkt läge i e-post-Designer dark-mode-email-designer

När det gäller det mörka läget i e-post-Designer finns det två aspekter att tänka på:

Förhandsvisa standardläget för mörk preview-dark-mode

Följ stegen nedan för att öppna det mörka läget i e-postprogrammet Designer och få en förhandsvisning av standardinställningarna för det mörka läget.

Som standard används färgschemat"Fullfärgsinvertering" för alla element utom bilder och ikoner i förhandsvisningen av Designer i mörkt läge.

Det innebär att det upptäcker områden med ljusa och mörka element och inverterar dem, så att ljusa bakgrunder blir mörka och mörk text blir ljusa, medan mörka bakgrunder blir ljusa och ljusa text blir mörka.

Definiera anpassat mörkt läge define-custom-dark-mode

När du har växlat till Dark mode kan du välja att redigera specifika formatelement för ditt innehåll som bara visas när mörkt läge är aktiverat i mottagarens e-postklient, förutsatt att det har stöd för den funktionen.

Journey Optimizer använder för att utnyttja den anpassade stilen för mörkt läge i e-postläge i Designer @media (prefers-color-scheme: dark) CSS-fråga som identifierar om användarens e-postklient är inställd på mörkt läge och använder den design med mörka teman som definierats i ditt e-postmeddelande.

Följ stegen nedan för att definiera egna inställningar för mörkt läge.

Bästa praxis best-practices

Efterhand som användningen av mörkt läge ökar för alla större e-postklienter är det viktigt att tänka på hur dina e-postmeddelanden återges i både ljusa och mörka miljöer, oavsett om du använder anpassat mörkt läge eller inte.

Mörkt läge kan ändra färger, bakgrunder och bilder - ibland åsidosätta designalternativ. För att säkerställa visuell enhetlighet, tillgänglighet och varumärkesintegritet följer du de bästa metoderna nedan.

Optimera bilder och logotyper

Se dina bakgrunder

Designa hjälpmedelsanpassat innehåll i mörkt läge

Testa dina e-postmeddelanden i mörkt läge