Dark mode v e-mailu: jak funguje a jak ho řeší Quanda

Dark mode v e-mailu je tmavý režim, ve kterém poštovní program zobrazí tmavé pozadí a světlý text. Část programů nechá váš e-mail beze změny, část ho přebarví podle sebe a některé, například klasický Outlook pro Windows, převrátí všechny barvy bez ohledu na kód. Tento návod ukazuje, co přesně dělají jednotlivé e-mailové klienty na počítači, na webu a v mobilu, jak to řeší e-mail editor Quandy a co můžete udělat vy.

V kostce

1. Tmavý režim používá podle Litmusu víc než čtvrtina uživatelů, u otevření sledovaných v roce 2022 to bylo průměrně 35 %.
2. Programy se dělí do tří skupin: bez změny, částečná inverze a úplná inverze.
3. E-mail editor Quandy při každém exportu sám doplní pravidla, která zamykají barvy z editoru. Nic nenastavujete.
4. Zámek funguje v Apple Mailu a v Outlooku na webu a v mobilu. Klasický Outlook pro Windows a aplikace Gmail ho nerespektují.
5. Obrázky se nemění, proto je největší riziko logo s průhledným pozadím a fotka s bílým pozadím.
6. Náhled v editoru tmavý režim neukáže. Rozhoduje testovací e-mail v reálných programech.

Stručně: co, proč, kde a co s tím

• Co se děje: poštovní program v tmavém režimu může změnit barvy pozadí, textu i tlačítek ve vašem e-mailu.
• Proč to řešit: nečitelný text, zmizelé logo a neznámé barvy značky vidí příjemce, ne vy.
• Co řeší Quanda: barvy z editoru hlídá sama, všude tam, kde to program dovolí.
• Co zbývá na vás: obrázky, kontrast a testovací e-mail do programů, které příjemci používají.

Co je dark mode v e-mailu

Dark mode neboli tmavý režim je způsob zobrazení, ve kterém zařízení nebo aplikace používá tmavé plochy a světlý text. V e-mailu je to složitější než na webu, protože o vzhledu nerozhoduje jen autor, ale i poštovní program, kterému se říká e-mailový klient.

E-mailový klient je program nebo webová stránka, ve které si příjemce čte poštu, třeba Apple Mail, Gmail nebo Outlook. Když příjemce zapne tmavý režim, klient se rozhoduje, co s přijatým e-mailem udělá. Může ho nechat na pokoji nebo mu přepsat barvy, a to bez ohledu na to, co jste v editoru nastavili.

Zapíná ho vždy příjemce, ne odesílatel. Nejčastěji přes nastavení telefonu nebo počítače. Aplikace Gmail v Androidu má navíc vlastní volbu motivu, na iPhonu se řídí nastavením systému.

Kolik lidí čte e-maily v tmavém režimu

Tmavý režim je běžný, ale nečte v něm většina. Nejspolehlivější čísla pro e-mail má Litmus, který dokáže tmavý režim u části otevření rozpoznat.

Procenta z různých let a metodik nejde porovnávat jako trend. Pro praxi stačí jednoduchý závěr: asi každý čtvrtý až třetí příjemce může váš e-mail vidět v tmavém prostředí. Na blozích se objevují i údaje přes 80 %, většinou ale bez dohledatelného zdroje nebo jde o preference u telefonu obecně, ne o čtení e-mailů.

Je dobré vědět i to, že tmavý režim není automaticky čitelnější. Nielsen Norman Group ve svém přehledu studií z roku 2020 uvádí, že lidé s běžným zrakem čtou lépe tmavý text na světlém pozadí a že rozdíl roste u menšího písma. Tmavý režim naopak může pomoci některým lidem se zakalenou oční čočkou. Tmavý režim si lidé tedy volí spíš kvůli pohodlí a zvyku než kvůli lepší čitelnosti a tuto volbu je dobré respektovat.

Rozhodující je také to, v čem vaši příjemci čtou:

Vaše databáze může vypadat úplně jinak. U firemních adres bývá Outlook mnohem silnější, u českých spotřebitelů hraje roli Seznam. Globální čísla tedy berte jako orientaci.

Jak e-mailové klienty mění barvy: tři skupiny

E-mailové klienty mění barvy třemi způsoby: e-mail nechají beze změny, provedou částečnou inverzi nebo úplnou inverzi. Toto dělení používá Litmus.

Bez změny. Klient ztmaví jen své okno a e-mail ukáže v původních barvách. Patří sem Gmail na webu, Yahoo Mail, AOL a Apple Mail, pokud má e-mail nastavené barvy.

Částečná inverze. Inverze je převrácení barev, tedy světlé na tmavé a naopak. Částečná inverze ztmaví jen světlá pozadí a zesvětlí tmavý text, tmavé plochy nechá být. Takto se chová Outlook.com, aplikace Outlook v mobilu, Gmail pro Android a Office 365 na Macu.

Úplná inverze. Klient převrátí celé barevné schéma včetně tmavých ploch, takže se může změnit i barva značky. Takto se chová Outlook 2021 a Office 365 pro Windows, aplikace Pošta ve Windows a Gmail pro iOS.

Podpora dark mode v e-mailových klientech: přehled

Podpora dark mode se mezi klienty výrazně liší: Apple Mail a Outlook na webu a v mobilu na kód reagují, klasický Outlook pro Windows ne a Gmail jen omezeně. Tabulky ukazují pro každý klient, co v tmavém režimu udělá s e-mailem, jestli reaguje na kód a co s tím dělá Quanda. Sloupec Pod kontrolou říká, jestli barvy z editoru v daném klientovi podle dostupných dat zůstanou.

Chování klientů vychází z tabulky Litmusu z února 2025, reakce na kód z databáze Can I email. Export Quandy jsme ověřili na e-mailu z editoru 30. 10. 2026. Klienty se průběžně mění, proto je berte jako výchozí bod, ne jako záruku.

E-mailové klienty na počítači

Webové e-mailové klienty

Mobilní e-mailové aplikace

Pozor na novinku v Gmailu: Google na přelomu srpna a září 2026 označil starou žádost za vyřešenou a aplikace Gmail teď podle Email Markup Consortium a testů Dyspatch respektují značku <meta name="color-scheme" content="light only">. Oficiální dokumentace Googlu zatím není a platí to podle dostupných testů jen pro účty Google, ne pro cizí schránky v aplikaci Gmail. Can I email potvrzuje částečnou podporu v testu ze září 2026.

Jak dark mode řeší Quanda e-mail editor

Quanda e-mail editor v tmavém režimu e-mail nepřebarvuje, ale snaží se zamknout světlý návrh. Zámek barev je sada pravidel v HTML, která klientům s tmavým režimem nařídí přesně ty barvy, které jste zvolili. Děje se to při každém exportu a nic nenastavujete.

Tmavou verzi editor nevytváří záměrně. Můžete v něm použít libovolné barvy, takže nejde předem určit správnou tmavou paletu. Automatické ztmavení by navíc ohrožovalo barvy značky a obrázky s bílým pozadím. Přednost dostala předvídatelnost: e-mail má vypadat tak, jak jste ho navrhli.

Co editor při exportu udělá

1. Deklaruje podporu tmavého režimu. Do hlavičky přidá značky color-scheme a supported-color-schemes s hodnotou light dark.
2. Označí barevné prvky. Každý prvek s pozadím nebo barvou textu dostane třídu odvozenou od barvy, například qe-dm-bg-f1f1f1.
3. Vygeneruje pravidla. Každá použitá barva dostane pravidlo s !important, zvlášť v @media (prefers-color-scheme: dark) a zvlášť pro Outlook přes [data-ogsb] a [data-ogsc].
4. Přidá atribut bgcolor. Pozadí nese jako HTML atribut i <body> a hlavní tabulka, protože Outlook ho vyžaduje.
5. Ošetří tlačítka. Buňky s bgcolor dostanou pozadí v zápisu rgba(), které Outlook.com a Gmail pro Android neinvertují.
6. Nechá bloky pro Outlook beze změny. Podmíněné komentáře a VML, tedy starší grafický jazyk Outlooku, zůstávají, jak jsou.

Zkrácená ukázka výstupu editoru:

:root { color-scheme: light dark; supported-color-schemes: light dark; }

@media (prefers-color-scheme: dark) {
  .qe-dm-bg-f1f1f1 { background-color: #f1f1f1 !important; }
  .qe-dm-bg-ffffff { background-color: #fffffe !important; }
  .qe-dm-fg-000000 { color: #010101 !important; }
}

[data-ogsb] .qe-dm-bg-f1f1f1 { background-color: #f1f1f1 !important; }
[data-ogsb] .qe-dm-bg-ffffff { background-color: #fffffe !important; }
[data-ogsc] .qe-dm-fg-000000 { color: #010101 !important; }

Proč bílá není bílá: trik s #fffffe

Apple Mail na Macu i iPhonu uvnitř @media (prefers-color-scheme: dark) ignoruje pozadí #ffffff, zatímco #fffffe přijme. Chybu popisuje od roku 2019 hlášení č. 65 v přehledu chyb e-mailových klientů email-bugs a je dodnes otevřené. Bez ošetření by mohl vzniknout černý text na černém pozadí.

Editor proto v pravidlech pro tmavý režim píše bílou jako #fffffe a černou jako #010101. Okem rozdíl nepoznáte. V samotném e-mailu zůstávají původní barvy.

Co editor neřeší

• Obrázky. Editor je nemění a neumí vyměnit světlé logo za tmavé.
• Náhled. Editor nemá náhled tmavého režimu, kontrola vyžaduje testovací e-mail.
• Barvy, které nejsou zapsané. Zamknou se jen plné barvy. Prvek bez vlastní barvy ani průhledný prvek pravidlo nedostane.
• Oslnění. Světlý e-mail zůstane světlý i v tmavém prostředí, takže může působit jasně. Je to vědomý kompromis.

Kde dark mode ovlivníte a kde ne

Dark mode je dělba práce mezi editorem, vámi a programem příjemce. Tato tabulka ukazuje, kdo o čem rozhoduje.

Z tabulky plyne hlavní pravidlo: navrhujte tak, aby e-mail obstál i po inverzi. Tam, kde zámek funguje, je to pojistka navíc. Tam, kde nefunguje, je to jediná ochrana.

Jak navrhnout e-mail pro dark mode: co je správně a co špatně

Největší rizika nejsou v barvách pozadí, ty klient obvykle zvládne. Jsou v prvcích, které se nepřebarvují, tedy hlavně v obrázcích.

Logo: obrys nebo vlastní plocha

Logo s tmavým písmem a průhledným pozadím je nejčastější oběť dark mode. Na bílém pozadí vypadá dobře, na ztmaveném zmizí.

Máte dvě spolehlivá řešení. Prvním je světlý obrys o síle 1 až 2 pixely kolem tmavých tvarů. Na bílém pozadí ho nikdo neuvidí a na tmavém logo drží. Druhým je vlastní plocha, tedy logo uložené přímo s bílým nebo barevným podkladem. Obojí je PNG, formát, který jako jediný z běžných umí plynulou průhlednost, přehled najdete v článku JPG, PNG nebo GIF?.

Fotky: pozor na bílé pozadí

Produktová fotka na bílém pozadí se v tmavém e-mailu změní v bílý obdélník. Ve světlém návrhu ji nevidíte, protože splývá s pozadím e-mailu.

Fotku buď ořízněte do PNG s průhledným pozadím nebo ji dejte do záběru s vlastním pozadím, například na stůl nebo do prostředí. Jak obrázek správně připravit, popisuje článek Obrázky v e-mailu.

Tlačítka: plná barva a kontrast

Tlačítko je to, kvůli čemu e-mail posíláte, a právě u něj se chyby prodraží. Světlé tlačítko s bílým textem je čitelné jen náhodou, v inverzi se může stát neviditelným.

Volte plnou střední barvu, která má kontrast vůči textu aspoň 4,5 : 1 podle pravidel WCAG. Tlačítko nikdy nedělejte jako obrázek, pokud to není nutné. Textové tlačítko se umí přizpůsobit a přečte ho i ten, kdo si obrázky nestáhl. Víc o volbě barev a kontrastu najdete v článku Jak mít barvy na své straně.

Přehled nejčastějších chyb

Tip: V editoru nastavte v panelu Nastavení výslovně barvu pozadí e-mailu, těla, hlavičky a patičky i barvu textu. Zámek funguje jen na barvy, které jsou v e-mailu opravdu zapsané.

Jak zkontrolovat e-mail v tmavém režimu

Náhled v editoru tmavý režim neukáže, takže rozhoduje skutečný test. Stačí ho udělat jednou pro každou novou šablonu.

Krok 1: Zjistěte, v čem příjemci čtou

Podívejte se, které programy převažují ve vaší databázi. Firemní adresy často znamenají Outlook, osobní adresy Gmail, Apple Mail a Seznam.

Krok 2: Nastavte barvy výslovně

V editoru nastavte barvu pozadí e-mailu, těla a každého barevného bloku i barvu textu. Editor zamyká jen barvy, které jsou v e-mailu výslovně zapsané.

Krok 3: Zkontrolujte logo a obrázky

Logo s průhledným pozadím vyzkoušejte na tmavé ploše, přidejte mu světlý obrys nebo vlastní plochu a fotky s bílým pozadím nahraďte oříznutými.

Krok 4: Pošlete si testovací e-mail

Na stránce Odeslání vyplňte až tři testovací adresy a klikněte na Odeslat testovací e-mail. Postup popisuje nápověda Nastavení odeslání v jednoduché kampani.

Krok 5: Otevřete e-mail v tmavém režimu

Přepněte zařízení do tmavého režimu a e-mail otevřete alespoň na iPhonu, v aplikaci Gmail a v Outlooku pro Windows. Uvidíte tak e-mail beze změny i po inverzi. Máte-li příjemce na Androidu, přidejte Gmail i tam, protože přebarvuje jinak než na iPhonu.

Krok 6: Projděte kontrolní seznam

Ověřte čitelnost textu, viditelnost loga, barvu a čitelnost tlačítka, obrázky, patičku a odkaz na odhlášení.

Kontrolní seznam před odesláním:

• Logo je vidět na světlém i tmavém pozadí.
• Text je čitelný a má dost kontrastu.
• Tlačítko je čitelné a výrazné.
• Žádná fotka nevytváří bílý obdélník.
• Ikony sociálních sítí jsou vidět.
• Patička a odkaz na odhlášení jsou čitelné.
• Důležité informace jsou v textu, ne v obrázku.
• Barvy všech bloků jsou v editoru výslovně nastavené.

Krok 7: Opravte a otestujte znovu

Upravte, co nevyhovělo, a pošlete si nový testovací e-mail. Odeslat kampaň můžete, až když je e-mail čitelný ve všech hlavních programech.

Tip: Nástroje na ukázky vzhledu v klientech pomáhají, ale nespoléhejte na ně slepě. Dyspatch uvádí, že náhled aplikace Gmail v Litmusu po změně z roku 2026 dál ukazoval vynucený tmavý režim, zatímco skutečně doručený e-mail se choval jinak. Poslední slovo má reálné zařízení.

Dark mode v HTML kódu: co ovlivníte vlastním kódem

Vlastním HTML kódem ovlivníte tmavý režim v Apple Mailu a v Outlooku na webu a v mobilu, v klasickém Outlooku pro Windows ne. U e-mailu z vlastního kódu počítejte s tím, že chování v tmavém režimu řešíte sami, a na rozdíl od editoru můžete jít dál a vytvořit opravdovou tmavou verzi.

Základ tvoří tři věci: deklarace podpory v hlavičce, pravidla pro tmavý režim a jejich zrcadlo pro Outlook.

<head>
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <style>
    :root { color-scheme: light dark; }

    @media (prefers-color-scheme: dark) {
      .email-bg { background-color: #1a1a1a !important; }
      .content-bg { background-color: #272623 !important; }
      .body-text { color: #e0e0e0 !important; }
    }

    [data-ogsb] .content-bg { background-color: #272623 !important; }
    [data-ogsc] .body-text { color: #e0e0e0 !important; }
  </style>
</head>

Třídy doplňte k prvkům a inline barvy nechte jako základ pro klienty, které pravidla neznají. Každá barevná sekce potřebuje vlastní třídu, jinak ji Apple Mail může přebarvit samostatně a vznikne barevný obdélník uprostřed tmavého e-mailu.

Tmavou verzi dokážete ukázat v Apple Mailu a Outlooku na webu a v mobilu. Gmail vaše tmavé styly nepřečte.

Jak chtít od Gmailu světlý e-mail

Pokud chcete, aby aplikace Gmail u účtů Google e-mail nepřebarvovala, přidejte značku s hodnotou light only. Apple Mail ji ale čte taky a přestal by používat vaše tmavé styly, proto se v CSS vrací color-scheme: light dark.

<meta name="color-scheme" content="light only">
<style>
  :root { color-scheme: light dark; }
</style>

Dejte si pozor na dvě věci. Oficiální dokumentace Googlu zatím neexistuje a chování ověřené testy se týká jen účtů Google. Před nasazením proto postup vyzkoušejte v aplikaci Gmail na iPhonu i Androidu.

Co kódem neovlivníte

Klasický Outlook pro Windows nečte @media (prefers-color-scheme) ani atributy data-og*. Existují triky, ty ale fungují jen v části případů a Litmus doporučuje používat je střídmě, protože jdou proti volbě příjemce. U Outlooku je lepší e-mail navrhnout tak, aby inverzi přežil. Příjemce si navíc může v Outlooku přepnout pozadí zprávy tlačítkem slunce a měsíce.

Pokud nechcete kód psát sami, pomůže Quanda MCP server. AI asistent napíše HTML e-mail podle průvodce Quandy včetně tmavého režimu a v Quandě založí koncept kampaně s testovacím e-mailem.

Dark mode v e-mailu: shrnutí

Dark mode nejde vypnout ani obejít, jde s ním jen počítat. V e-mail editoru Quandy nemusíte nic nastavovat: barvy z editoru se zamknou všude, kde to klient dovolí, tedy v Apple Mailu a v Outlooku na webu a v mobilu. Tam, kde klient rozhoduje sám, jako v klasickém Outlooku pro Windows a v aplikacích Gmail, vás ochrání jen návrh, který inverzi přežije.

Zapamatujte si tři věci: nastavte barvy výslovně, ošetřete logo a fotky s bílým pozadím a pošlete si testovací e-mail do reálných programů.

Chcete si to projít do hloubky? Vyzkoušejte online kurz zdarma Copywriting a design e-mailů, které se čtou. A pokud si nejste jistí, jak váš e-mail v tmavém režimu vypadá, ozvěte se na konzultaci zdarma.