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.
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ą.
Jak Projektować pod Dark Mode
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.
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.
Dodaj Meta Tagi w <head> (Wskazówka Techniczna)
<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.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">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.
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.
Last updated