search
API DOCSEmail API & Cloud SMTPCennikBlog

Projektowanie dla Trybu Ciemnego (Dark Mode)

Coraz więcej użytkowników korzysta z trybu ciemnego w swoich systemach i aplikacjach pocztowych. Klient poczty automatycznie odwraca wtedy kolory (jasne tło staje się ciemne, a ciemny tekst staje się jasny), co może zepsuć wygląd Twojego e-maila, jeśli nie został on do tego przygotowany.

hashtag
Najczęstsze Problemy

  • Ciemne logo lub ikony stają się niewidoczne na ciemnym tle.

  • Jasne grafiki uzyskują nieestetyczne, ostre krawędzie.

  • Odwrócone kolory marki wyglądają źle i tracą spójność wizualną.

  • Separatory i tła zlewają się ze sobą.

hashtag
Jak Projektować pod Dark Mode

hashtag
Używaj Obrazów z Przezroczystym Tłem (PNG)

Dotyczy to zwłaszcza logo i ikon. Dzięki przezroczystości (.png) grafiki te lepiej dopasują się do dynamicznie zmienionego tła, niezależnie od tego, czy będzie ono ciemnoszare, czy czarne.

hashtag
Dodaj Obrys Ciemnym Elementom Graficznym

Jeśli musisz użyć ciemnego logo lub ważnych grafik bez przezroczystości, rozważ dodanie do nich bardzo cienkiego, jasnego obrysu (np. białego lub jasnoszarego). Dzięki temu pozostaną one widoczne, gdy tło e-maila zostanie odwrócone na ciemne.

hashtag
Dodaj Meta Tagi w <head> (Wskazówka Techniczna)

Umieszczenie poniższych meta tagów w sekcji <head> szablonu informuje klienta poczty, że Twoja wiadomość wspiera oba tryby kolorystyczne. Może to pomóc w uzyskaniu bardziej przewidywalnego efektu.

hashtag
Użyj Dedykowanych Styli (Metoda Zaawansowana)

Możesz użyć media query @media (prefers-color-scheme: dark) { ... }, aby zdefiniować inne style CSS specjalnie dla trybu ciemnego (np. zamienić logo na jaśniejszą wersję, dostosować kolory tła). Pamiętaj jednak, że wsparcie dla tej techniki jest nadal ograniczone. Niektórzy klienci (np. Apple Mail) uszanują te style, a inni (np. Gmail) i tak wymuszą własną inwersję kolorów.

hashtag
Testuj, Testuj, Testuj!

Zawsze sprawdzaj wygląd swoich e-maili w popularnych klientach pocztowych z włączonym trybem ciemnym (np. Gmail na mobile, Apple Mail, Outlook). Profesjonalne narzędzia do testowania e-maili (np. Litmus from Validity, Sinch Email on Acid) oferują podglądy w dark mode, co znacznie ułatwia ten proces.

circle-info

Pamiętaj: Osiągnięcie idealnego wyglądu w każdym kliencie poczty w trybie ciemnym jest niezwykle trudne. Skup się przede wszystkim na zapewnieniu czytelności i użyteczności wiadomości, nawet jeśli jej wygląd nie będzie perfekcyjny.

PreviousProjektowanie Skutecznych Wezwań do Działania (CTA)NextTesty A/B Treści i Wyglądu

Last updated