Průvodce tmavým módem

28 April, 2021

V posledních pár letech získává tmavý mód na popularitě, připravili jsme proto pro vás článek o tom, jak ho implementovat do svých e-mailů.

Tmavý mód
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ě.

Desktopové aplikace Webmaily Mobilní aplikace
Apple Mail Gmail.com iPhone Mail
Outlook 2019 (Windows) Outlook.com iPad Mail
Outlook 2019 (MacOS) Yahoo.com Gmail (Android, iOS)
  Hey.com Outlook (Android, iOS)
  Seznam.cz Email.cz (Android)
  Centrum.cz Web.de (iOS)
  Mail.ru Mail.ru (Android)


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:

Klient Výchozí metoda @media [data-ogsc] Poznámka
Apple Mail (MacOS) Beze změny* Ano Ne *bílá (#ffffff) na pozadí je zobrazena jako tmavá pokud je v hlavičce <meta> tag
iPhone / iPad (iOS 13) Beze změny* Ano Ne *bílá (#ffffff) pozadí jsou zobrazena jako tmavá pokud je v hlavičce <meta> tag
Hey.com Beze změny Ano Ne  
Outlook.com Částečná konverze Částečně* Částečně** *některá světlá pozadí budou tmavá
**výměna obrázků funguje
Outlook 2019 (MacOS) Částečná konverze Částečně* Ne *některá světlá pozadí budou tmavá
Outlook 2019 (Windows) Úplná konverze Ne Ne  
Outlook (iOS) Částečná konverze Částečně* Ne *některá světlá pozadí budou tmavá
Outlook (Android) Částečná konverze Ne Částečně* *některá světlá pozadí budou tmavá
Gmail (iOS) Úplná konverze Ne Ne  
Gmail (Android) Částečná konverze Ne Ne  


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.
Mailkit logo
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.

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

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:

@media (prefers-color-scheme: dark) {
/* zobrazí obsah pouze v tmavém módu, např. obrázky */
.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
   
/* schová obsah ze světlého módu, např. obrázky */
.light-img { display:none; display:none !important; }
   
/* vlastní barva pozadí v tmavém módu */
.darkmode { background-color: #272623 !important; }
   
/* vlastní barva písma v tmavém módu */
h1, h2, p, span, a, b { color: #ffffff !important; }
   
/* vlastní barva odkazů v tmavém módu */
.link { color: #91ADD4 !important; }
}
 
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:

/* zobrazí obsah pouze v tmavém módu, např. obrázky */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
   
/* schová obsah ze světlého módu, např. obrázky */
[data-ogsc] .light-img { display:none; display:none !important; }
   
/* vlastní barva pozadí v tmavém módu */
[data-ogsc] .darkmode { background-color: #272623 !important; }
   
/* vlastní barva písma v tmavém módu */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }
   
/* vlastní barva odkazů v tmavém módu */
[data-ogsc] .link { color: #91ADD4 !important; }

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:

<!-- začátek HEADER_LOGO -->
<a href="http://www.mailkit.com/" target="_blank">
 
    <img class="light-img" src="https://mailkit.com/obrazky/logo-svetly-mod.png" width="163" height="60" alt="mailkit" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />

   
<!-- Toto logo je chované pomocí podmínky MSO a inline stylů, zobrazí se, když se zapne tmavý mód -->
 
    <!--[if !mso]><! -->
<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center">
          <img src="https://mailkit.com/obrazky/logo-tmavy-mod.png" width="163" height="60" alt="mailkit" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
    </div>
<!--<![endif]-->

</a>   
<!-- konec HEADER_LOGO -->

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ě.