Obsługa stylów nadpisujących tryb ciemny w klientach poczty ogranicza się do Apple Mail na iOS/macOS, co oznacza, że nadpisania trybu ciemnego nie zadziałają w żadnym innym kliencie, takim jak Gmail czy Outlook. Pamiętaj o tym i projektuj e-maile zgodnie z zasadą stopniowego ulepszania (progressive enhancement).
Poradnik wideo: dodawanie stylów trybu ciemnego do projektów e-maili HTML
Ten film pokazuje, jak dodać do projektów e-maili własne nadpisania stylów trybu ciemnego i eksportować z Figmy responsywne e-maile HTML gotowe do produkcji za pomocą wtyczki Emailify.
Ważne kwestie projektowe w trybie ciemnym
Obsługa stylów nadpisujących tryb ciemny w klientach poczty ogranicza się do Apple Mail na iOS/macOS, co oznacza, że nadpisania trybu ciemnego nie zadziałają w żadnym innym kliencie, takim jak Gmail czy Outlook. Pamiętaj o tym i projektuj e-maile zgodnie z zasadą stopniowego ulepszania (progressive enhancement).
Każdy klient poczty implementuje tryb ciemny po swojemu, więc projektowanie pod niego jest bardzo trudne. Warto jednak starać się pracować z (często fatalnymi) zmianami, które każdy klient poczty automatycznie wprowadza w trybie ciemnym.
Na dobry początek przejrzyj materiały (na przykład artykuły CampaignMonitor i Litmus), które dokładnie opisują, co zmieniają klienty poczty i jak złagodzić część tych zmian w projekcie.
Nadpisywanie kolorów w trybie ciemnym
Zaznacz element, taki jak warstwa tekstowa, obraz, Button, Row, Column lub Wrapper, a następnie kliknij przycisk Settings w nagłówku wtyczki. Kolory tekstu i tła w trybie ciemnym ustawisz w sekcji Dark Mode Overrides na dole panelu Settings.
W warstwach Button, Row, Column i Wrapper możesz też nadpisać Border Color. Zmienia to kolor obramowania w trybie ciemnym bez zmiany grubości ani stylu obramowania używanych w trybie jasnym.
Te nadpisania będą widoczne w klientach poczty, które obsługują tę funkcję (aplikacje Apple Mail na iOS/macOS), gdy e-mail jest wyświetlany na urządzeniu z włączonym trybem ciemnym.
Obsługa stylów nadpisujących tryb ciemny w klientach poczty ogranicza się do Apple Mail na iOS/macOS, co oznacza, że nadpisania trybu ciemnego nie zadziałają w żadnym innym kliencie, takim jak Gmail czy Outlook. Pamiętaj o tym i projektuj e-maile zgodnie z zasadą stopniowego ulepszania (progressive enhancement).
Podmiana dwóch warstw obrazów w trybie ciemnym i jasnym
Możesz też podmieniać wybrane warstwy obrazów w trybie ciemnym. Kliknij warstwę treści w Figmie (wewnątrz warstwy Column), potem przycisk Settings w nagłówku wtyczki i włącz przełącznik Only Hide in Dark Mode lub Only Show in Dark Mode – w zależności od tego, czy warstwa obrazu ma być pokazana, czy ukryta w klientach poczty, które obsługują tę funkcję (aplikacje Apple Mail na iOS/macOS), gdy e-mail jest wyświetlany na urządzeniu z włączonym trybem ciemnym.
Obsługa stylów nadpisujących tryb ciemny w klientach poczty ogranicza się do Apple Mail na iOS/macOS, co oznacza, że nadpisania trybu ciemnego nie zadziałają w żadnym innym kliencie, takim jak Gmail czy Outlook. Pamiętaj o tym i projektuj e-maile zgodnie z zasadą stopniowego ulepszania (progressive enhancement).
Podgląd trybu ciemnego we wtyczce
Otwórz Preview i włącz przełącznik Dark Mode na pasku narzędzi HTML Preview. Jeśli chcesz porównać ten sam projekt w trybie ciemnym w szerokości desktopowej lub mobilnej, nadal korzystaj z wyboru szerokości podglądu. Dark Mode jest niedostępny, gdy wybrany jest łączony widok Hybrid Desktop & Mobile.
Lokalny podgląd stosuje ogólne, automatyczne przekształcenie trybu ciemnego i aktywuje style prefers-color-scheme e-maila. Jego korekty kolorów dają tylko przybliżony obraz i nie odpowiadają konkretnemu klientowi poczty. Jeśli e-mail zawiera nadpisania trybu ciemnego z Emailify, przełącznikiem Overrides obok możesz pokazać lub ukryć jego jawne style tła, tekstu, obramowania i podmiany obrazów.
Ten przełącznik to pomoc projektowa, a nie emulator klienta ani urządzenia. Nie odtwarza mechanizmów oczyszczania kodu (sanitizerów) w zalogowanych skrzynkach, natywnych silników renderujących i fontów, interfejsu aplikacji, przetwarzania podczas dostarczania ani wszystkich różnic między klientami i ich wersjami.
Testowanie e-maili w trybie ciemnym
Poradnik wideo: testowanie e-maili HTML wyeksportowanych z Figmy w trybie ciemnym
Ten film pokazuje, jak testować w trybie ciemnym e-maile HTML wyeksportowane z Figmy za pomocą wtyczki Emailify i serwisu Litmus.com.
Zawsze warto przetestować własne e-maile w usłudze takiej jak Litmus lub Email on Acid, aby przed wysyłką upewnić się, że dobrze wyglądają.
Obsługa stylów nadpisujących tryb ciemny w klientach poczty ogranicza się do Apple Mail na iOS/macOS, co oznacza, że nadpisania trybu ciemnego nie zadziałają w żadnym innym kliencie, takim jak Gmail czy Outlook. Pamiętaj o tym i projektuj e-maile zgodnie z zasadą stopniowego ulepszania (progressive enhancement).
Możesz masowo zastosować ustawienia: otwórz Settings, a potem zaznacz w Figmie kilka warstw Emailify tego samego typu. Każde zmienione ustawienie zostanie zastosowane do wszystkich zaznaczonych warstw.