Tryb ciemny w e-mailu: jak działa i jak radzi sobie z nim Quanda

Tryb ciemny w e-mailu to sposób wyświetlania, w którym program pocztowy pokazuje ciemne tło i jasny tekst. Część programów zostawia Twój e-mail bez zmian, część zmienia jego kolory po swojemu, a niektóre, na przykład klasyczny Outlook dla Windows, odwracają wszystkie kolory niezależnie od kodu. Ten poradnik pokazuje, co dokładnie robią poszczególne programy pocztowe na komputerze, w przeglądarce i na telefonie, jak radzi sobie z tym edytor e-maili Quandy i co możesz zrobić Ty.

W skrócie

1. Tryb ciemny używa według Litmusa ponad jedna czwarta użytkowników, a wśród otwarć śledzonych w 2022 roku było to średnio 35 %.
2. Programy dzielą się na trzy grupy: bez zmian, częściowa inwersja i pełna inwersja.
3. Edytor e-maili Quandy przy każdym eksporcie sam dodaje reguły, które blokują kolory z edytora. Niczego nie ustawiasz.
4. Blokadę sprawdziliśmy w Apple Mail na Maca. W serwisie Outlook.com w naszym teście nie zadziałała, a klasyczny Outlook dla Windows i aplikacje Gmail jej nie respektują.
5. Obrazy się nie zmieniają, dlatego największe ryzyko to logo z przezroczystym tłem i zdjęcie z białym tłem.
6. Podgląd w edytorze trybu ciemnego nie pokaże. Decyduje e-mail testowy w prawdziwych programach.

Krótko: co, dlaczego, gdzie i co z tym zrobić

• Co się dzieje: program pocztowy może w trybie ciemnym zmienić kolory tła, tekstu i przycisków w Twoim e-mailu.
• Dlaczego warto się tym zająć: nieczytelny tekst, zniknięte logo i obce kolory marki widzi odbiorca, nie Ty.
• Czym zajmuje się Quanda: sama pilnuje kolorów z edytora wszędzie tam, gdzie program na to pozwala.
• Co zostaje po Twojej stronie: obrazy, kontrast i e-mail testowy do programów, których używają odbiorcy.

Czym jest tryb ciemny w e-mailu

Tryb ciemny, po angielsku dark mode, to sposób wyświetlania, w którym urządzenie albo aplikacja używa ciemnych powierzchni i jasnego tekstu. W e-mailu jest to bardziej skomplikowane niż na stronie internetowej, ponieważ o wyglądzie decyduje nie tylko autor, ale też program pocztowy, nazywany klientem poczty.

Program pocztowy to aplikacja albo strona internetowa, w której odbiorca czyta pocztę, na przykład Apple Mail, Gmail czy Outlook. Gdy odbiorca włączy tryb ciemny, program decyduje, co zrobi z otrzymanym e-mailem. Może zostawić go w spokoju albo nadpisać jego kolory, niezależnie od tego, co ustawisz w edytorze.

Tryb ciemny włącza zawsze odbiorca, nie nadawca. Najczęściej w ustawieniach telefonu albo komputera. Aplikacja Gmail na Androidzie ma dodatkowo własny wybór motywu, na iPhonie kieruje się ustawieniami systemu.

Ile osób czyta e-maile w trybie ciemnym

Tryb ciemny jest powszechny, ale większość w nim nie czyta. Najbardziej wiarygodne liczby dla e-maila ma Litmus, który potrafi rozpoznać tryb ciemny przy części otwarć.

Procentów z różnych lat i metodyk nie da się porównywać jako trendu. W praktyce wystarczy prosty wniosek: mniej więcej co czwarty, a nawet co trzeci odbiorca może zobaczyć Twój e-mail w ciemnym otoczeniu. Na blogach pojawiają się też dane powyżej 80 %, zwykle jednak bez możliwego do znalezienia źródła albo dotyczą preferencji na telefonie ogólnie, a nie czytania e-maili.

Warto też wiedzieć, że tryb ciemny nie jest automatycznie czytelniejszy. Nielsen Norman Group w swoim przeglądzie badań z 2020 roku podaje, że osoby z typowym wzrokiem lepiej czytają ciemny tekst na jasnym tle, a różnica rośnie przy mniejszej czcionce. Tryb ciemny może z kolei pomóc niektórym osobom z zaćmą. Ludzie wybierają więc tryb ciemny raczej z wygody i przyzwyczajenia niż dla lepszej czytelności i ten wybór warto uszanować.

Decydujące jest również to, w czym czytają Twoi odbiorcy:

Twoja baza może wyglądać zupełnie inaczej. Przy adresach firmowych Outlook bywa znacznie silniejszy, a u polskich konsumentów znaczenie mają WP i Onet. Globalne liczby traktuj więc orientacyjnie.

Jak programy pocztowe zmieniają kolory: trzy grupy

Programy pocztowe zmieniają kolory na trzy sposoby: zostawiają e-mail bez zmian, stosują inwersję częściową albo inwersję pełną. Ten podział stosuje Litmus.

Bez zmian. Program przyciemnia tylko swoje okno i pokazuje e-mail w oryginalnych kolorach. Należą tu Gmail w przeglądarce, Yahoo Mail, AOL i Apple Mail, jeśli e-mail ma ustawione kolory.

Częściowa inwersja. Inwersja to odwrócenie kolorów, czyli jasne na ciemne i odwrotnie. Częściowa inwersja przyciemnia tylko jasne tła i rozjaśnia ciemny tekst, a ciemne powierzchnie zostawia. Tak zachowują się Outlook.com, aplikacja Outlook na telefonie, Gmail na Androida i Office 365 na Maca.

Pełna inwersja. Program odwraca cały schemat kolorów razem z ciemnymi powierzchniami, więc może się zmienić także kolor marki. Tak zachowują się Outlook 2021 i Office 365 dla Windows, aplikacja Poczta w Windows i Gmail na iOS.

Obsługa trybu ciemnego w programach pocztowych: przegląd

Obsługa trybu ciemnego bardzo różni się między programami: Apple Mail reaguje na kod, klasyczny Outlook dla Windows nie, Gmail tylko w ograniczonym zakresie, a przy Outlooku testy i dostępne dane się rozchodzą. Tabele pokazują dla każdego programu, co w trybie ciemnym robi z e-mailem, czy reaguje na kod i co z tym robi Quanda. Kolumna Pod kontrolą mówi, czy kolory z edytora zostaną w danym programie zachowane według dostępnych danych.

Zachowanie programów opiera się na tabeli Litmusa z lutego 2025, a reakcja na kod na bazie Can I email. Eksport Quandy sprawdziliśmy na e-mailu z edytora 30 października 2026. W serwisie Outlook.com w naszym teście z tego samego dnia kolory zostały odwrócone, a blokada nie zadziałała, chociaż Can I email podaje te reguły jako obsługiwane. Programy stale się zmieniają, dlatego traktuj te dane jako punkt wyjścia, a nie gwarancję.

Jak testowaliśmy: w serwisie Outlook.com w trybie ciemnym, w prywatnej skrzynce @outlook.com, najpierw z ręcznie napisanym HTML o takim samym zapisie reguł jak w eksporcie, a potem z prawdziwym e-mailem z edytora. Reguły [data-ogsb], [data-ogsc] ani @media (prefers-color-scheme: dark) nie zadziałały, a zwykła reguła z klasą i !important tak. Nie testowaliśmy aplikacji Outlook na telefonie, Outlooka w przeglądarce na kontach firmowych Microsoft 365 ani nowego Outlooka dla Windows.

Programy pocztowe na komputerze

Programy pocztowe w przeglądarce

Mobilne aplikacje pocztowe

Uwaga na nowość w Gmailu: Google na przełomie sierpnia i września 2026 oznaczył stare zgłoszenie jako rozwiązane i aplikacje Gmail według Email Markup Consortium oraz testów Dyspatch respektują teraz znacznik <meta name="color-scheme" content="light only">. Oficjalnej dokumentacji Google na razie nie ma, a według dostępnych testów dotyczy to tylko kont Google, nie obcych skrzynek w aplikacji Gmail. Can I email potwierdza częściową obsługę w teście z września 2026.

Jak z trybem ciemnym radzi sobie edytor e-maili Quandy

Edytor e-maili Quandy nie zmienia kolorów e-maila w trybie ciemnym, lecz stara się zablokować jasny projekt. Blokada kolorów to zestaw reguł w HTML, które każą programom z trybem ciemnym użyć dokładnie tych kolorów, które wybrałeś. Dzieje się to przy każdym eksporcie i niczego nie ustawiasz. Blokada kolorów jest dostępna we wszystkich planach.

Edytor celowo nie tworzy ciemnej wersji. Możesz używać w nim dowolnych kolorów, więc nie da się z góry określić właściwej ciemnej palety. Automatyczne przyciemnienie zagrażałoby poza tym kolorom marki i obrazom z białym tłem. Pierwszeństwo dostała przewidywalność: e-mail ma wyglądać tak, jak go zaprojektowałeś.

Co edytor robi przy eksporcie

1. Deklaruje obsługę trybu ciemnego. Do nagłówka dodaje znaczniki color-scheme i supported-color-schemes z wartością light dark.
2. Oznacza kolorowe elementy. Każdy element z tłem albo kolorem tekstu dostaje klasę utworzoną od koloru, na przykład qe-dm-bg-f1f1f1.
3. Generuje reguły. Każdy użyty kolor dostaje regułę z !important, osobno w @media (prefers-color-scheme: dark) i osobno dla Outlooka przez [data-ogsb] i [data-ogsc].
4. Dodaje atrybut bgcolor. Tło jako atrybut HTML mają też <body> i główna tabela, ponieważ Outlook tego wymaga.
5. Zabezpiecza przyciski. Komórki z bgcolor dostają tło w zapisie rgba(), którego Gmail na Androida nie odwraca. W Outlook.com zapis ma ten sam cel, ale jego działania nie sprawdziliśmy.
6. Zostawia bloki dla Outlooka bez zmian. Komentarze warunkowe i VML, czyli starszy język graficzny Outlooka, pozostają takie, jakie są.

Skrócony przykład wyniku z edytora:

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

Dlaczego biały nie jest biały: sztuczka z #fffffe

Apple Mail na Maca i iPhone'a wewnątrz @media (prefers-color-scheme: dark) ignoruje tło #ffffff, a #fffffe przyjmuje. Błąd opisuje od 2019 roku zgłoszenie nr 65 w przeglądzie błędów programów pocztowych email-bugs i jest ono nadal otwarte. Bez zabezpieczenia mógłby powstać czarny tekst na czarnym tle.

Edytor zapisuje więc w regułach dla trybu ciemnego biały jako #fffffe, a czarny jako #010101. Różnicy gołym okiem nie zobaczysz. W samym e-mailu zostają oryginalne kolory.

Czego edytor nie rozwiązuje

• Obrazy. Edytor ich nie zmienia i nie potrafi podmienić jasnego logo na ciemne.
• Podgląd. Edytor nie ma podglądu trybu ciemnego, sprawdzenie wymaga e-maila testowego.
• Kolory, które nie są zapisane. Blokowane są tylko pełne kolory. Element bez własnego koloru ani przezroczysty element nie dostanie reguły.
• Olśnienie. Jasny e-mail zostaje jasny także w ciemnym otoczeniu, więc może sprawiać wrażenie zbyt jaskrawego. To świadomy kompromis.

Na co masz wpływ w trybie ciemnym, a na co nie

Tryb ciemny to podział pracy między edytor, Ciebie i program odbiorcy. Ta tabela pokazuje, kto o czym decyduje.

Z tabeli wynika główna zasada: projektuj tak, aby e-mail obronił się także po inwersji. Tam, gdzie blokada działa, to dodatkowe zabezpieczenie. Tam, gdzie nie działa, to jedyna ochrona.

Jak zaprojektować e-mail do trybu ciemnego: co jest dobrze, a co źle

Największe ryzyko nie tkwi w kolorach tła, z tymi program zwykle sobie radzi. Tkwi w elementach, które nie zmieniają kolorów, czyli przede wszystkim w obrazach.

Logo: obrys albo własna powierzchnia

Logo z ciemnymi literami i przezroczystym tłem to najczęstsza ofiara trybu ciemnego. Na białym tle wygląda dobrze, na przyciemnionym znika.

Masz dwa niezawodne rozwiązania. Pierwszym jest jasny obrys o grubości 1 do 2 pikseli wokół ciemnych kształtów. Na białym tle nikt go nie zobaczy, a na ciemnym utrzyma logo. Drugim jest własna powierzchnia, czyli logo zapisane od razu z białym albo kolorowym podkładem. Jedno i drugie to PNG, jedyny z popularnych formatów z płynną przezroczystością, przegląd znajdziesz w artykule JPG, PNG czy GIF? Jakiego typu pliku obrazów użyć w e-mailingu.

Zdjęcia: uwaga na białe tło

Zdjęcie produktu na białym tle zmienia się w ciemnym e-mailu w biały prostokąt. W jasnym projekcie go nie widać, ponieważ zlewa się z tłem e-maila.

Zdjęcie przytnij do PNG z przezroczystym tłem albo wybierz ujęcie z własnym tłem, na przykład na stole albo w otoczeniu. Jak dobrze przygotować obraz, opisuje artykuł Obrazy w e-mailu: proporcje tekstu i obrazów i co działa.

Przyciski: pełny kolor i kontrast

Przycisk to powód, dla którego wysyłasz e-mail, i to właśnie przy nim błędy kosztują najwięcej. Jasny przycisk z białym tekstem jest czytelny tylko przypadkiem, a w inwersji może stać się niewidoczny.

Wybierz pełny średni kolor, który ma kontrast względem tekstu co najmniej 4,5 : 1 według zasad WCAG. Przycisku nigdy nie rób jako obrazu, jeśli nie jest to konieczne. Przycisk tekstowy potrafi się dostosować i przeczyta go także ten, kto nie pobrał obrazów. Więcej o wyborze kolorów i kontraście znajdziesz w artykule Psychologia kolorów w marketingu: kolory po swojej stronie.

Przegląd najczęstszych błędów

Wskazówka: W edytorze ustaw w panelu Ustawienia jawnie kolor tła e-maila, ciała, nagłówka i stopki oraz kolor tekstu. Blokada działa tylko na kolory, które są w e-mailu faktycznie zapisane.

Jak sprawdzić e-mail w trybie ciemnym

Podgląd w edytorze trybu ciemnego nie pokaże, więc decyduje prawdziwy test. Zajmuje około dwudziestu minut i wystarczy zrobić go raz dla każdego nowego szablonu.

Krok 1: Sprawdź, w czym czytają odbiorcy

Zobacz, które programy przeważają w Twojej bazie. Adresy firmowe często oznaczają Outlooka, a prywatne Gmaila, Apple Mail, WP i Onet.

Krok 2: Ustaw kolory jawnie

W edytorze ustaw kolor tła e-maila, ciała i każdego kolorowego bloku oraz kolor tekstu. Edytor blokuje tylko kolory, które są w e-mailu jawnie zapisane.

Krok 3: Sprawdź logo i obrazy

Logo z przezroczystym tłem wypróbuj na ciemnej powierzchni, dodaj mu jasny obrys albo własną powierzchnię, a zdjęcia z białym tłem zastąp przyciętymi.

Krok 4: Wyślij sobie e-mail testowy

Na stronie Wysyłka wpisz maksymalnie trzy adresy testowe i kliknij Wyślij testowe e-maile. Cały proces opisuje instrukcja Ustawienie wysyłki w prostej kampanii.

Krok 5: Otwórz e-mail w trybie ciemnym

Przełącz urządzenie na tryb ciemny i otwórz e-mail co najmniej na iPhonie, w aplikacji Gmail i w Outlooku dla Windows. Zobaczysz w ten sposób e-mail bez zmian i po inwersji. Jeśli masz odbiorców na Androidzie, dodaj także tamtejszego Gmaila, ponieważ zmienia kolory inaczej niż na iPhonie. Jeśli masz wielu odbiorców w Outlooku, przetestuj też Outlooka w przeglądarce i aplikację Outlook na telefonie, ponieważ reguły mogą tam nie działać tak, jak podają dostępne tabele.

Krok 6: Przejdź przez listę kontrolną

Sprawdź czytelność tekstu, widoczność logo, kolor i czytelność przycisku, obrazy, stopkę i link do wypisania.

Lista kontrolna przed wysyłką:

• Logo jest widoczne na jasnym i ciemnym tle.
• Tekst jest czytelny i ma wystarczający kontrast.
• Przycisk jest czytelny i wyraźny.
• Żadne zdjęcie nie tworzy białego prostokąta.
• Ikony sieci społecznościowych są widoczne.
• Stopka i link do wypisania są czytelne.
• Ważne informacje są w tekście, nie na obrazie.
• Kolory wszystkich bloków są jawnie ustawione w edytorze.

Krok 7: Popraw i przetestuj ponownie

Popraw to, co nie zadziałało, i wyślij sobie nowy e-mail testowy. Kampanię możesz wysłać dopiero wtedy, gdy e-mail jest czytelny we wszystkich głównych programach.

Wskazówka: Narzędzia do podglądu wyglądu w programach pomagają, ale nie polegaj na nich ślepo. Dyspatch podaje, że podgląd aplikacji Gmail w Litmusie po zmianie z 2026 roku nadal pokazywał wymuszony tryb ciemny, podczas gdy faktycznie dostarczony e-mail zachowywał się inaczej. Ostatnie słowo ma prawdziwe urządzenie.

Tryb ciemny w kodzie HTML: na co wpływasz własnym kodem

Własnym kodem HTML niezawodnie wpłyniesz na tryb ciemny w Apple Mailu, ale nie w klasycznym Outlooku dla Windows, a w serwisie Outlook.com reguły w naszym teście nie zadziałały. Przy e-mailu z własnego kodu licz się z tym, że zachowanie w trybie ciemnym rozwiązujesz sam, a w przeciwieństwie do edytora możesz pójść dalej i utworzyć prawdziwą ciemną wersję.

Podstawą są trzy rzeczy: deklaracja obsługi w nagłówku, reguły dla trybu ciemnego i ich lustrzane odbicie dla Outlooka. Lustrzane odbicie dla Outlooka Can I email podaje jako obsługiwane, ale w serwisie Outlook.com w naszym teście nie zadziałało, dlatego zawsze sprawdź je e-mailem testowym.

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

Klasy dodaj do elementów, a kolory inline zostaw jako podstawę dla programów, które tych reguł nie znają. Każda kolorowa sekcja potrzebuje własnej klasy, inaczej Apple Mail może zmienić jej kolor osobno i powstanie kolorowy prostokąt pośrodku ciemnego e-maila.

Ciemną wersję pokażesz w Apple Mail, w Outlooku na telefonie trzeba ją wypróbować, a w serwisie Outlook.com w naszym teście nie zadziałała. Gmail Twoich ciemnych stylów nie odczyta.

Jak poprosić Gmaila o jasny e-mail

Jeśli chcesz, aby aplikacja Gmail przy kontach Google nie zmieniała kolorów e-maila, dodaj znacznik z wartością light only. Apple Mail też go jednak czyta i przestałby używać Twoich ciemnych stylów, dlatego w CSS wraca color-scheme: light dark.

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

Uważaj na dwie rzeczy. Oficjalna dokumentacja Google na razie nie istnieje, a zachowanie potwierdzone testami dotyczy tylko kont Google. Przed wdrożeniem wypróbuj więc ten sposób w aplikacji Gmail na iPhonie i na Androidzie.

Na co kod nie ma wpływu

Klasyczny Outlook dla Windows nie czyta @media (prefers-color-scheme) ani atrybutów data-og*. Istnieją sztuczki, ale działają tylko w części przypadków, a Litmus zaleca używać ich oszczędnie, ponieważ idą wbrew wyborowi odbiorcy. Przy Outlooku lepiej zaprojektować e-mail tak, aby przetrwał inwersję. Odbiorca może poza tym przełączyć w Outlooku tło wiadomości przyciskiem ze słońcem i księżycem.

Jeśli nie chcesz pisać kodu sam, pomoże Quanda MCP server. Asystent AI napisze e-mail HTML według przewodnika Quandy razem z trybem ciemnym i założy w Quandzie szkic kampanii z e-mailem testowym.

Tryb ciemny w e-mailu: podsumowanie

Trybu ciemnego nie da się wyłączyć ani obejść, można się z nim tylko liczyć. W edytorze e-maili Quandy nie musisz niczego ustawiać: kolory z edytora są blokowane wszędzie tam, gdzie program na to pozwala, co sprawdziliśmy w Apple Mail na Maca. Tam, gdzie program decyduje sam, jak w serwisie Outlook.com, w klasycznym Outlooku dla Windows i w aplikacjach Gmail, chroni Cię tylko projekt, który przetrwa inwersję.

Zapamiętaj trzy rzeczy: ustaw kolory jawnie, zabezpiecz logo i zdjęcia z białym tłem i wyślij sobie e-mail testowy do prawdziwych programów.

Chcesz przejść przez to dokładniej? Wypróbuj bezpłatny kurs online Copywriting i design e-maili. A jeśli nie masz pewności, jak Twój e-mail wygląda w trybie ciemnym, umów się na bezpłatną konsultację.