E-mail · Projekt

Dark mode w e-mailach sklepu — jak projektować newsletter pod ciemny motyw

Co się dzieje z mailem w ciemnym motywie

Coraz więcej osób ma telefon i komputer ustawione na ciemny motyw, a aplikacje pocztowe próbują dopasować do niego także treść maila. Problem w tym, że każda robi to po swojemu. W praktyce spotkasz trzy zachowania:

Które zachowanie wystąpi, zależy od aplikacji (Apple Mail, Gmail, Outlook), systemu i wersji — i potrafi się zmieniać z aktualizacjami. Dlatego zamiast projektować pod jedną skrzynkę, projektuj tak, żeby mail przetrwał każdą z trzech wersji.

Logo i grafiki: najczęstsza ofiara

• Ciemne logo na przezroczystym tle znika na ciemnym tle aplikacji. Rozwiązania: dodaj do PNG cienki jasny obrys lub poświatę albo umieść logo na własnym jasnym „kafelku” z zaokrąglonymi rogami.
• Tekst w grafice (baner z hasłem promocji) nie zostanie przekolorowany. Kluczowe informacje — rabat, termin, kod — pisz tekstem HTML, a grafikę traktuj jako ilustrację.
• Zdjęcia produktów na białym tle będą wyglądać jak białe prostokąty. To akceptowalne, ale ładniej wygląda zdjęcie z marginesem i zaokrągleniem albo na neutralnym, jasnoszarym tle.

Kolory i przyciski

• Zamiast czystej bieli i czerni użyj złamanych odcieni (np. tło #fafafa, tekst #1f2937). Po inwersji dają mniej rażący kontrast.
• Przyciski rób w HTML (tło + tekst w komórce tabeli lub linku), nie jako obrazki. Aplikacja przekoloruje je spójnie z resztą maila, a tekst przycisku zostanie czytelny.
• Sprawdź kontrast: dla zwykłego tekstu wytyczne WCAG zalecają co najmniej 4,5:1 — w obu motywach.
• Linie podziału i ramki w bardzo jasnym szarym potrafią po inwersji zniknąć albo zrobić się zbyt mocne — daj im średni odcień.

Kod: jak powiedzieć skrzynce, że obsługujesz ciemny motyw

Część aplikacji (np. Apple Mail) respektuje własne style maila dla ciemnego motywu. Wtedy to Ty decydujesz o kolorach, a nie automatyczna inwersja. Podstawa w sekcji <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) {
    .bg   { background:#111827 !important; }
    .txt  { color:#f3f4f6 !important; }
    .logo-light { display:none !important; }
    .logo-dark  { display:block !important; }
  }
</style>

Ten sam mail może mieć dwie wersje logo (jasną i ciemną) przełączane przez media query. Pamiętaj, że aplikacje, które same odwracają kolory, mogą te style zignorować — dlatego zasady z sekcji o logo i kolorach obowiązują zawsze.

Jak testować przed wysyłką

1. Wyślij test na własne skrzynki w kilku aplikacjach: Apple Mail na iPhonie, aplikacja Gmail na Androidzie i iOS, Outlook — każda z włączonym ciemnym motywem.
2. Sprawdź logo, przyciski, tekst na grafikach, stopkę (link wypisu musi być czytelny) i linie podziału.
3. Zrób to samo dla maili automatycznych: porzucony koszyk, powitanie, potwierdzenie zapisu. Projektuje się je raz, a wysyłają się miesiącami.
4. Zapisz wyniki w krótkiej tabeli: aplikacja → co wygląda źle → poprawka. Przy kolejnej kampanii testujesz tylko zmienione elementy.

Checklista: newsletter odporny na dark mode

• Logo ma jasny obrys, własny kafelek albo osobną wersję na ciemne tło.
• Rabat, termin i kod są tekstem HTML, nie tylko w grafice.
• Przyciski zbudowane w HTML, nie jako obrazki.
• Złamane odcienie zamiast czystej bieli i czerni.
• Kontrast tekstu co najmniej 4,5:1 w obu motywach.
• Meta color-scheme i media query prefers-color-scheme w nagłówku.
• Test w Apple Mail, aplikacji Gmail i Outlooku w ciemnym motywie.
• Stopka i link wypisu czytelne po inwersji.
• Maile automatyczne sprawdzone tak samo jak kampanie.

Podsumowanie

Nie da się kontrolować wszystkich aplikacji, ale można zaprojektować mail, który dobrze znosi każdą z nich: czytelne logo, tekst zamiast grafik z tekstem, przyciski w HTML i test w kilku skrzynkach. Zacznij od zasad z projektowania newslettera, a szablony automatyzacji przejrzyj według poradnika o porzuconych koszykach.

Najczęstsze pytania