Dark mode v e-maile: ako funguje a ako ho rieši Quanda

Dark mode v e-maile je tmavý režim, v ktorom poštový program zobrazí tmavé pozadie a svetlý text. Časť programov nechá váš e-mail bez zmeny, časť ho prefarbí podľa seba a niektoré, napríklad klasický Outlook pre Windows, prevrátia všetky farby bez ohľadu na kód. Tento návod ukazuje, čo presne robia jednotlivé e-mailové klienty na počítači, na webe a v mobile, ako to rieši e-mail editor Quandy a čo môžete urobiť vy.

V kocke

1. Tmavý režim používa podľa Litmusu viac ako štvrtina používateľov, pri otvoreniach sledovaných v roku 2022 to bolo priemerne 35 %.
2. Programy sa delia do troch skupín: bez zmeny, čiastočná inverzia a úplná inverzia.
3. E-mail editor Quandy pri každom exporte sám doplní pravidlá, ktoré zamykajú farby z editora. Nič nenastavujete.
4. Zámok sme overili v Apple Maile na Macu. Na webe Outlook.com v našom teste nefungoval, klasický Outlook pre Windows a aplikácia Gmail ho nerešpektujú.
5. Obrázky sa nemenia, preto je najväčšie riziko logo s priehľadným pozadím a fotka s bielym pozadím.
6. Náhľad v editore tmavý režim neukáže. Rozhoduje testovací e-mail v reálnych programoch.

Stručne: čo, prečo, kde a čo s tým

• Čo sa deje: poštový program môže v tmavom režime zmeniť farby pozadia, textu aj tlačidiel vo vašom e-maile.
• Prečo to riešiť: nečitateľný text, zmiznuté logo a neznáme farby značky vidí príjemca, nie vy.
• Čo rieši Quanda: farby z editora stráži sama, všade tam, kde to program dovolí.
• Čo zostáva na vás: obrázky, kontrast a testovací e-mail do programov, ktoré príjemcovia používajú.

Čo je dark mode v e-maile

Dark mode alebo tmavý režim je spôsob zobrazenia, v ktorom zariadenie alebo aplikácia používa tmavé plochy a svetlý text. V e-maile je to zložitejšie než na webe, pretože o vzhľade nerozhoduje len autor, ale aj poštový program, ktorému sa hovorí e-mailový klient.

E-mailový klient je program alebo webová stránka, v ktorej si príjemca číta poštu, napríklad Apple Mail, Gmail alebo Outlook. Keď príjemca zapne tmavý režim, klient sa rozhoduje, čo s prijatým e-mailom urobí. Môže ho nechať tak alebo mu prepísať farby, a to bez ohľadu na to, čo ste v editore nastavili.

Zapína ho vždy príjemca, nie odosielateľ. Najčastejšie cez nastavenia telefónu alebo počítača. Aplikácia Gmail v Androide má navyše vlastnú voľbu motívu, na iPhone sa riadi nastavením systému.

Koľko ľudí číta e-maily v tmavom režime

Tmavý režim je bežný, ale nečíta v ňom väčšina. Najspoľahlivejšie čísla pre e-mail má Litmus, ktorý dokáže tmavý režim pri časti otvorení rozpoznať.

Percentá z rôznych rokov a metodík nemožno porovnávať ako trend. Pre prax stačí jednoduchý záver: približne každý štvrtý až tretí príjemca môže váš e-mail vidieť v tmavom prostredí. Na blogoch sa objavujú aj údaje nad 80 %, väčšinou však bez dohľadateľného zdroja alebo ide o preferencie pri telefóne všeobecne, nie o čítanie e-mailov.

Dobré je vedieť aj to, že tmavý režim nie je automaticky čitateľnejší. Nielsen Norman Group vo svojom prehľade štúdií z roku 2020 uvádza, že ľudia s bežným zrakom čítajú lepšie tmavý text na svetlom pozadí a že rozdiel rastie pri menšom písme. Tmavý režim naopak môže pomôcť niektorým ľuďom so zakalenou očnou šošovkou. Tmavý režim si ľudia teda volia skôr pre pohodlie a zvyk než pre lepšiu čitateľnosť a túto voľbu je dobré rešpektovať.

Rozhodujúce je aj to, v čom vaši príjemcovia čítajú:

Vaša databáza môže vyzerať úplne inak. Pri firemných adresách býva Outlook oveľa silnejší, pri spotrebiteľoch na Slovensku hrá úlohu aj Azet a pri českých adresách Seznam. Globálne čísla teda berte ako orientáciu.

Ako e-mailové klienty menia farby: tri skupiny

E-mailové klienty menia farby tromi spôsobmi: e-mail nechajú bez zmeny, urobia čiastočnú inverziu alebo úplnú inverziu. Toto delenie používa Litmus.

Bez zmeny. Klient stmaví len svoje okno a e-mail ukáže v pôvodných farbách. Patrí sem Gmail na webe, Yahoo Mail, AOL a Apple Mail, ak má e-mail nastavené farby.

Čiastočná inverzia. Inverzia je prevrátenie farieb, teda svetlé na tmavé a naopak. Čiastočná inverzia stmaví len svetlé pozadia a zosvetlí tmavý text, tmavé plochy nechá tak. Takto sa správa Outlook.com, aplikácia Outlook v mobile, Gmail pre Android a Office 365 na Macu.

Úplná inverzia. Klient prevráti celú farebnú schému vrátane tmavých plôch, takže sa môže zmeniť aj farba značky. Takto sa správa Outlook 2021 a Office 365 pre Windows, aplikácia Pošta vo Windows a Gmail pre iOS.

Podpora dark mode v e-mailových klientoch: prehľad

Podpora dark mode sa medzi klientmi výrazne líši: Apple Mail na kód reaguje, klasický Outlook pre Windows nie, Gmail len obmedzene a pri Outlooku sa testy a dostupné dáta rozchádzajú. Tabuľky ukazujú pre každý klient, čo v tmavom režime urobí s e-mailom, či reaguje na kód a čo s tým robí Quanda. Stĺpec Pod kontrolou hovorí, či farby z editora v danom klientovi podľa dostupných dát zostanú.

Správanie klientov vychádza z tabuľky Litmusu z februára 2025, reakcie na kód z databázy Can I email. Export Quandy sme overili na e-maile z editora 30. 10. 2026. Na webe Outlook.com v našom teste z rovnakého dňa farby invertoval a zámok nefungoval, hoci Can I email tieto pravidlá uvádza ako podporované. Klienty sa priebežne menia, preto ich berte ako východiskový bod, nie ako záruku.

Ako sme testovali: na webe Outlook.com v tmavom režime, v osobnej schránke @outlook.com, najprv s ručne napísaným HTML s rovnakým zápisom pravidiel ako v exporte a potom so skutočným e-mailom z editora. Pravidlá [data-ogsb], [data-ogsc] ani @media (prefers-color-scheme: dark) sa neuplatnili, bežné pravidlo s triedou a !important áno. Aplikácie Outlook v mobile, Outlook na webe vo firemných účtoch Microsoft 365 a nový Outlook pre Windows sme netestovali.

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

Webové e-mailové klienty

Mobilné e-mailové aplikácie

Pozor na novinku v Gmaile: Google na prelome augusta a septembra 2026 označil starú požiadavku za vyriešenú a aplikácie Gmail teraz podľa Email Markup Consortium a testov Dyspatch rešpektujú značku <meta name="color-scheme" content="light only">. Oficiálna dokumentácia Googlu zatiaľ nie je a platí to podľa dostupných testov len pre účty Google, nie pre cudzie schránky v aplikácii Gmail. Can I email potvrdzuje čiastočnú podporu v teste zo septembra 2026.

Ako dark mode rieši Quanda e-mail editor

Quanda e-mail editor v tmavom režime e-mail neprefarbuje, ale snaží sa zamknúť svetlý návrh. Zámok farieb je sada pravidiel v HTML, ktorá klientom s tmavým režimom nariadi presne tie farby, ktoré ste zvolili. Deje sa to pri každom exporte a nič nenastavujete. Zámok farieb je dostupný vo všetkých tarifoch.

Tmavú verziu editor nevytvára zámerne. Môžete v ňom použiť ľubovoľné farby, takže nemožno vopred určiť správnu tmavú paletu. Automatické stmavenie by navyše ohrozovalo farby značky a obrázky s bielym pozadím. Prednosť dostala predvídateľnosť: e-mail má vyzerať tak, ako ste ho navrhli.

Čo editor pri exporte urobí

1. Deklaruje podporu tmavého režimu. Do hlavičky pridá značky color-scheme a supported-color-schemes s hodnotou light dark.
2. Označí farebné prvky. Každý prvok s pozadím alebo farbou textu dostane triedu odvodenú od farby, napríklad qe-dm-bg-f1f1f1.
3. Vygeneruje pravidlá. Každá použitá farba dostane pravidlo s !important, zvlášť v @media (prefers-color-scheme: dark) a zvlášť pre Outlook cez [data-ogsb] a [data-ogsc].
4. Pridá atribút bgcolor. Pozadie nesie ako HTML atribút aj <body> a hlavná tabuľka, pretože Outlook ho vyžaduje.
5. Ošetrí tlačidlá. Bunky s bgcolor dostanú pozadie v zápise rgba(), ktoré Gmail pre Android neinvertuje. Pri Outlook.com má zápis rovnaký účel, účinok sme však neoverili.
6. Nechá bloky pre Outlook bez zmeny. Podmienené komentáre a VML, teda starší grafický jazyk Outlooku, zostávajú tak, ako sú.

Skrátená ukážka výstupu editora:

: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; }

Prečo biela nie je biela: trik s #fffffe

Apple Mail na Macu aj iPhone vnútri @media (prefers-color-scheme: dark) ignoruje pozadie #ffffff, zatiaľ čo #fffffe prijme. Chybu opisuje od roku 2019 hlásenie č. 65 v prehľade chýb e-mailových klientov email-bugs a je dodnes otvorené. Bez ošetrenia by mohol vzniknúť čierny text na čiernom pozadí.

Editor preto v pravidlách pre tmavý režim píše bielu ako #fffffe a čiernu ako #010101. Okom rozdiel nespoznáte. V samotnom e-maile zostávajú pôvodné farby.

Čo editor nerieši

• Obrázky. Editor ich nemení a nevie vymeniť svetlé logo za tmavé.
• Náhľad. Editor nemá náhľad tmavého režimu, kontrola vyžaduje testovací e-mail.
• Farby, ktoré nie sú zapísané. Zamknú sa len plné farby. Prvok bez vlastnej farby ani priehľadný prvok pravidlo nedostane.
• Oslnenie. Svetlý e-mail zostane svetlý aj v tmavom prostredí, takže môže pôsobiť jasne. Je to vedomý kompromis.

Kde dark mode ovplyvníte a kde nie

Dark mode je deľba práce medzi editorom, vami a programom príjemcu. Táto tabuľka ukazuje, kto o čom rozhoduje.

Z tabuľky vyplýva hlavné pravidlo: navrhujte tak, aby e-mail obstál aj po inverzii. Tam, kde zámok funguje, je to poistka navyše. Tam, kde nefunguje, je to jediná ochrana.

Ako navrhnúť e-mail pre dark mode: čo je správne a čo zle

Najväčšie riziká nie sú vo farbách pozadia, tie klient zvyčajne zvládne. Sú v prvkoch, ktoré sa neprefarbujú, teda hlavne v obrázkoch.

Logo: obrys alebo vlastná plocha

Logo s tmavým písmom a priehľadným pozadím je najčastejšia obeť dark mode. Na bielom pozadí vyzerá dobre, na stmavenom zmizne.

Máte dve spoľahlivé riešenia. Prvým je svetlý obrys s hrúbkou 1 až 2 pixely okolo tmavých tvarov. Na bielom pozadí ho nikto neuvidí a na tmavom logo drží. Druhým je vlastná plocha, teda logo uložené priamo s bielym alebo farebným podkladom. Oboje je PNG, formát, ktorý ako jediný z bežných dokáže plynulú priehľadnosť, prehľad nájdete v článku JPG, PNG alebo GIF?.

Fotky: pozor na biele pozadie

Produktová fotka na bielom pozadí sa v tmavom e-maile zmení na biely obdĺžnik. Vo svetlom návrhu ju nevidíte, pretože splýva s pozadím e-mailu.

Fotku buď orežte do PNG s priehľadným pozadím, alebo ju dajte do záberu s vlastným pozadím, napríklad na stôl alebo do prostredia. Ako obrázok správne pripraviť, opisuje článok Obrázky v e-maile.

Tlačidlá: plná farba a kontrast

Tlačidlo je to, kvôli čomu e-mail posielate, a práve pri ňom chyby stoja najviac. Svetlé tlačidlo s bielym textom je čitateľné len náhodou, v inverzii sa môže stať neviditeľným.

Voľte plnú strednú farbu, ktorá má kontrast voči textu aspoň 4,5 : 1 podľa pravidiel WCAG. Tlačidlo nikdy nerobte ako obrázok, ak to nie je nutné. Textové tlačidlo sa vie prispôsobiť a prečíta ho aj ten, kto si obrázky nestiahol. Viac o výbere farieb a kontraste nájdete v článku Ako mať farby na svojej strane.

Prehľad najčastejších chýb

Tip: V editore nastavte v paneli Nastavenie výslovne farbu pozadia e-mailu, tela e-mailu, hlavičky a pätičky aj farbu textu. Zámok funguje len na farby, ktoré sú v e-maile naozaj zapísané.

Ako skontrolovať e-mail v tmavom režime

Náhľad v editore tmavý režim neukáže, takže rozhoduje skutočný test. Zaberie približne dvadsať minút a stačí ho urobiť raz pre každú novú šablónu.

Krok 1: Zistite, v čom príjemcovia čítajú

Pozrite sa, ktoré programy prevažujú vo vašej databáze. Firemné adresy často znamenajú Outlook, osobné adresy Gmail, Apple Mail a Azet.

Krok 2: Nastavte farby výslovne

V editore nastavte farbu pozadia e-mailu, tela a každého farebného bloku aj farbu textu. Editor zamyká len farby, ktoré sú v e-maile výslovne zapísané.

Krok 3: Skontrolujte logo a obrázky

Logo s priehľadným pozadím vyskúšajte na tmavej ploche, pridajte mu svetlý obrys alebo vlastnú plochu a fotky s bielym pozadím nahraďte orezanými.

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

Na stránke Odoslanie vyplňte až tri testovacie adresy a kliknite na Odoslať testovacie e-maily. Postup opisuje článok pomoci Nastavenie odoslania v jednoduchej kampani.

Krok 5: Otvorte e-mail v tmavom režime

Prepnite zariadenie do tmavého režimu a e-mail otvorte aspoň na iPhone, v aplikácii Gmail a v Outlooku pre Windows. Uvidíte tak e-mail bez zmeny aj po inverzii. Ak máte príjemcov na Androide, pridajte Gmail aj tam, pretože prefarbuje inak než na iPhone. Ak máte veľa príjemcov v Outlooku, otestujte aj Outlook na webe a aplikáciu Outlook v mobile, pretože pravidlá tam nemusia fungovať podľa dostupných tabuliek.

Krok 6: Prejdite kontrolný zoznam

Overte čitateľnosť textu, viditeľnosť loga, farbu a čitateľnosť tlačidla, obrázky, pätičku a odkaz na odhlásenie.

Kontrolný zoznam pred odoslaním:

• Logo je vidieť na svetlom aj tmavom pozadí.
• Text je čitateľný a má dostatočný kontrast.
• Tlačidlo je čitateľné a výrazné.
• Žiadna fotka nevytvára biely obdĺžnik.
• Ikony sociálnych sietí sú viditeľné.
• Pätička a odkaz na odhlásenie sú čitateľné.
• Dôležité informácie sú v texte, nie v obrázku.
• Farby všetkých blokov sú v editore výslovne nastavené.

Krok 7: Opravte a otestujte znova

Upravte, čo nevyhovelo, a pošlite si nový testovací e-mail. Odoslať kampaň môžete, až keď je e-mail čitateľný vo všetkých hlavných programoch.

Tip: Nástroje na ukážky vzhľadu v klientoch pomáhajú, ale nespoliehajte sa na ne slepo. Dyspatch uvádza, že náhľad aplikácie Gmail v Litmuse po zmene z roku 2026 ďalej ukazoval vynútený tmavý režim, zatiaľ čo skutočne doručený e-mail sa správal inak. Posledné slovo má reálne zariadenie.

Dark mode v HTML kóde: čo ovplyvníte vlastným kódom

Vlastným HTML kódom spoľahlivo ovplyvníte tmavý režim v Apple Maile, v klasickom Outlooku pre Windows nie a na webe Outlook.com sa pravidlá v našom teste neuplatnili. Pri e-maile z vlastného kódu počítajte s tým, že správanie v tmavom režime riešite sami, a na rozdiel od editora môžete ísť ďalej a vytvoriť skutočnú tmavú verziu.

Základ tvoria tri veci: deklarácia podpory v hlavičke, pravidlá pre tmavý režim a ich zrkadlo pre Outlook. Zrkadlo pre Outlook uvádza Can I email ako podporované, na webe Outlook.com sa však v našom teste neuplatnilo, preto ho vždy overte testovacím e-mailom.

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

Triedy doplňte k prvkom a inline farby nechajte ako základ pre klienty, ktoré pravidlá nepoznajú. Každá farebná sekcia potrebuje vlastnú triedu, inak ju Apple Mail môže prefarbiť samostatne a vznikne farebný obdĺžnik uprostred tmavého e-mailu.

Tmavú verziu dokážete ukázať v Apple Maile, v Outlooku v mobile je potrebné ju vyskúšať a na webe Outlook.com v našom teste nefungovala. Gmail vaše tmavé štýly neprečíta.

Ako od Gmailu žiadať svetlý e-mail

Ak chcete, aby aplikácia Gmail pri účtoch Google e-mail neprefarbovala, pridajte značku s hodnotou light only. Apple Mail ju však číta tiež a prestal by používať vaše tmavé štýly, preto sa v CSS vracia color-scheme: light dark.

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

Dajte si pozor na dve veci. Oficiálna dokumentácia Googlu zatiaľ neexistuje a správanie overené testami sa týka len účtov Google. Pred nasadením preto postup vyskúšajte v aplikácii Gmail na iPhone aj Androide.

Čo kódom neovplyvníte

Klasický Outlook pre Windows nečíta @media (prefers-color-scheme) ani atribúty data-og*. Existujú triky, tie však fungujú len v časti prípadov a Litmus odporúča používať ich striedmo, pretože idú proti voľbe príjemcu. Pri Outlooku je lepšie navrhnúť e-mail tak, aby inverziu prežil. Príjemca si navyše môže v Outlooku prepnúť pozadie správy tlačidlom slnka a mesiaca.

Ak nechcete kód písať sami, pomôže Quanda MCP server. AI asistent napíše HTML e-mail podľa sprievodcu Quandy vrátane tmavého režimu a v Quande založí koncept kampane s testovacím e-mailom.

Dark mode v e-maile: zhrnutie

Dark mode nemožno vypnúť ani obísť, dá sa s ním len počítať. V e-mail editore Quandy nemusíte nič nastavovať: farby z editora sa zamknú všade, kde to klient dovolí, čo sme overili v Apple Maile na Macu. Tam, kde klient rozhoduje sám, ako na webe Outlook.com, v klasickom Outlooku pre Windows a v aplikáciách Gmail, vás ochráni len návrh, ktorý inverziu prežije.

Zapamätajte si tri veci: nastavte farby výslovne, ošetrite logo a fotky s bielym pozadím a pošlite si testovací e-mail do reálnych programov.

Chcete si to prejsť do hĺbky? Vyskúšajte online kurz zadarmo Copywriting a dizajn e-mailov, ktoré sa čítajú. A ak si nie ste istí, ako váš e-mail v tmavom režime vyzerá, ozvite sa na konzultáciu zdarma.