Průvodce tmavým módem

V tomto článku vysvětlíme, jak s tmavým módem pracují e-mailoví klienti, a jak udělat sadu stylů, která se zobrazí v případě, že je klient do tmavého módu přepnutý. Pokud si nejste jistí, co tmavý mód je a jaké jsou jeho výhody, doporučujeme článek Tmavý vs. světlý mód.

Kteří klienti podporují tmavý mód?

Tito klienti (a někteří další) nabízejí možnost tmavého módu, buď automatickou detekcí módu systému/prohlížeče/zařízení, nebo si lze nastavení zvolit ručně.

Ovšem jen proto, že se tito klienti dají přepnout do tmavého režimu neznamená, že budou všechny zobrazovat váš e-mail stejně. Pořád platí, že různí klienti zobrazují různě, v jednom může e-mail vypadat v pořádku, v dalším bude rozbitý, a k tomu teď ještě přibyl tmavý mód. Ve skutečnosti je několik způsobů, jak může klient ve tmavém módu s vaším e-mailem naložit.

Jak se bude e-mail zobrazovat v tmavém prostředí

V této chvíli jsou tři odlišné způsoby, jak mohou být vaše e-maily zobrazeny v klientovi, který má zapnutý tmavý mód.

Žádné změny

Ano, čtete správně. U některých klientů se změní pouze barevné schéma v uživatelském prostředí, ale e-maily se zobrazují stejně jako ve světlém prostředí, tedy beze změn. Někteří e-mailoví klienti vždy zobrazí světlou verzi (pokud nepřidáte kód, kterým tmavou verzi zapnete, ale o tom později). Zde je seznam těchto klientů:

• Apple Mail
• iPhone Mail
• iPad Mail
• Hey.com

Jsou zde ovšem dvě výjimky:
Textové e-maily se zobrazí v tmavém módu. Pokud byste chtěli vynutit světlé zobrazení, stačí přidat obrázek 2px × 1px.
Pokud náhodou necháte <meta> tagy pro tmavý mód ve vaší šabloně, Apple Mail, iPhone Mail a iPad Mail automaticky zobrazí veškerou bílou #ffffff jako tmavě šedou, pokud nebudete mít definované styly. Tomu se lze snadno vyhnout použitím lehce tmavší bílé #fffffe.

Výchozí vs. Vlastní tmavý mód

Pokud svůj e-mail nijak neupravíte, někteří klienti jej zobrazí ve výchozím tmavém módu, což může přinést neočekávané výsledky. Pokud se vám tento přístup nezamlouvá, můžete si vytvořit vlastní sadu stylů pro použití ve tmavém módu, abyste měli kontrolu nad tím, jak bude váš e-mail vypadat.

Výchozí mód: částečná konverze

Předtím, než si vysvětlíme, jak udělat styly, se na chvíli zaměříme na to, jak výchozí zobrazování vypadá. Prvním druhem je tzv. “částečná konverze”, kdy klient detekuje jenom části se světlým pozadím, konvertuje je na tmavé, a tmavý text změní na světlý.

Části, které jsou tmavé, klient nechá bez úpravy, takže celkovým výsledkem je tmavý design. Naštěstí většina klientů, kteří používají tuto metodu, podporuje vlastní styly, takže máte možnost vynucení vlastních stylů pro tmavý mód.

Výchozí mód: úplná konverze

Tento výchozí mód neupravuje jenom světlé části, ale též tmavé části, takže co je tmavé konvertuje na světlé, a naopak. Bohužel je tento výchozí mód preferován více populárními klienty, jako například Gmail aplikací na iOS13 a Outlookem 2019 na Windows.

Nejenom, že celková konverze radikálně změní vzhled e-mailu, ale klienti, kteří ji využívají, zároveň zatím nepodporují vlastní sady stylů pro tmavý mód.

E-mailoví klienti se stále rozhodují, jak tmavý mód realizovat co nejlépe, a nedílnou součástí tohoto procesu je zpětná vazba od uživatelů, zejména v tomto případě, kdy nemožnost využití vlastních stylů může ovlivnit čitelnost.

Jak definovat vlastní styly pro tmavý mód

Nyní se podíváme na to, jak konkrétně vlastní styly definovat. Momentálně máme dvě metody, které můžeme použít:

@media (prefers-color-scheme: dark)

tento způsob funguje stejně jako například media query pro responzivní styly, jediný rozdíl je v tom, že se aplikuje, když má uživatel v klientu nastavené tmavé prostředí.

[data-ogsc]

tato metoda je zaměřená na Outlook, a byla poprvé zveřejněna Markem Robbinsem. Použití této metody je relativně snadné, stačí duplikovat styly které jste již použili v @media (prefers-color-scheme: dark), a ke každé třídě přidat na začátek názvu [data-ogsc]. Výsledek bude vypadat takto: [data-ogsc] .nazev-tridy { ... }

Bohužel, jako mnoho věcí v e-mailingu, tyto metody nejsou 100% platné, protože nejsou konzistentně podporovány. Zatímco někteří klienti (zejména Gmail) nenabízejí kodérům příležitost, jak ovlivnit zobrazení e-mailu v tmavém módu, většina podporuje alespoň jednu z uvedených metod.

Zde je krátký přehled toho, co klienti podporují a jak nakládají s e-mailem ve tmavém módu:

Až budete vlastní styly dávat do svých e-mailů, nezapomeňte prosím na následující věci:

1) Optimalizujte svá loga a další obrázky pro oba módy

Přidejte světlý obtah nebo záři do PNG a jiných průhledných obrázků, aby vynikly na tmavém pozadí v klientech, kteří nepodporují vlastní styly, například v Gmail aplikaci nebo Outlooku 2019 (Windows). Vyhnete se tím problémům ve chvíli, kdy se klient rozhodne použít buď částečnou nebo úplnou konverzi.

Pokud vaše obrázky nejsou průhledné, ujistěte se alespoň, že mají dostatečný okraj okolo (jako obálka v našem příkladu), abyste předešli tomu, že se obrázek setká s pozadím.

2) Umožněte zobrazování tmavého módu

Toho docílíte přidáním těchto meta tagů to hlavičky vašeho e-mailu.

3) Přidejte vlastní styly pro tmavý mód

Jak jsme již zmínili, přidáním @media (prefers-color-scheme: dark) definujete vlastní sadu stylů pro zobrazení ve tmavém módu. Pokud nechcete upravit logo obtahem či září, je možné použít .dark-img a .light-img styly pro zobrazení variant.

Příklad:

4) Duplikujte vlastní styly pro tmavý mód s předponou [data-ogsc]

Přidejte tyto styly pro úpravu zobrazení v aplikaci Outlook na Androidu.

Příklad:

5) Ujistěte se, že jsou nově přidané styly aplikované v těle e-mailu

Nezapomeňte všechny styly přiřadit do příslušných tagů v body.

Příklad:

6) Vždy testujte

Zobrazování e-mailů v klientech se mění a tmavý mód je zatím ve vývoji, takže může docházet ke změnám v zobrazení, rozšiřování (nebo naopak zužování) podpory vlastních stylů, atd. Z těchto důvodů je vhodné své šablony častěji testovat, abyste se ujistili, že se vaše e-maily zobrazují správně.