Jak użyć własnego kodu CSS, aby dostosować wygląd wiadomości w trybie ciemnym?

W edytorze wiadomości możesz skorzystać z opcji Własny CSS, aby zmienić kolory przycisków i sekcji, dostosować tło wiadomości oraz zapewnić widoczność logo w trybie ciemnym. Możesz też zachować wybrane kolory z projektu w trybie jasnym.

Przygotowując wiadomości, możesz zacząć od podstawowych opcji trybu ciemnego. Jeśli wiadomość nadal wymaga poprawek – na przykład logo jest słabo widoczne lub kolory przycisków tracą kontrast – możesz użyć własnego kodu CSS, żeby dopracować jej wygląd.

Czego potrzebujesz przed dodaniem własnych stylów trybu ciemnego

Potrzebujesz dostępu do opcji Własny CSS oraz znajomości CSS. Zobacz: Jak korzystać z opcji Własny CSS w edytorze wiadomości?

Musisz włączyć opcję Własny CSS dla każdego bloku, który chcesz dostosować. Bez tego klasa CSS bloku nie zostanie dodana do wysłanej wiadomości, więc niestandardowe style nie będą działać. Dotyczy to również sytuacji, gdy dodajesz kod do całej wiadomości.

Dodawanie własnego CSS do bloku

Aby przygotować blok:

1. Wybierz przycisk, sekcję lub obraz, który chcesz dostosować.
2. Włącz opcję Dodaj własny CSS w panelu po prawej stronie.
3. W polu CSS wpisz .elem, aby wyświetlić klasę wybranego bloku.
4. Skopiuj tę klasę i użyj jej, żeby zastąpić wszystkie wystąpienia .elem-ID w wybranym przykładzie.

Na przykład zamień .elem-ID na klasę taką jak .elem-image-5dc6501190a6. Klasa będzie inna dla każdego bloku.

Dodawanie własnego CSS do całej wiadomości

Aby zastosować style trybu ciemnego do całej wiadomości:

1. Otwórz opcję Styl wiadomości.
2. Rozwiń sekcję Własny CSS.
3. Dodaj poniższy kod raz na wiadomość, przed innymi regułami. Deklaruje to obsługę zarówno jasnego, jak i ciemnego schematu kolorów. Sprawdź efekt w każdej aplikacji pocztowej, z której korzystają Twoi odbiorcy.

:root {
 color-scheme: light dark;
 supported-color-schemes: light dark;
}

Jak zmienić kolory przycisków w trybie ciemnym

Dodaj poniższy kod do sekcji „Własny CSS” przycisku. Zastąp każdy.elem-ID nazwą klasy przycisku.

W tym przykładzie użyto jasnopomarańczowego tła i ciemnego tekstu w obsługiwanych aplikacjach pocztowych.

1/* Style trybu ciemnego dla aplikacji obsługujących to zapytanie o media:
2  w tym obsługiwane wersje Apple Mail, Outlooka i Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID table td,
5  .elem-ID a,
6  .elem-ID p {
7    background-color: #FFB27A !important;
 8  }
9
10  .elem-ID a,
11  .elem-ID p {
12    color: #1A1A1A !important;
13  }
14}
15
16/* Dodatkowe reguły dotyczące tła dla Outlook.com i aplikacji mobilnych Outlook */
17 [data-ogsb] .elem-ID table td,
18[data-ogsb] .elem-ID a,
19[data-ogsb] .elem-ID p {
20  background-color: #FFB27A !important;
21}
22
23/* Dodatkowe reguły tekstowe dla Outlook.com i aplikacji mobilnych Outlooka */
24[data-ogsc] .elem-ID a,
25[data-ogsc] .elem-ID p {
26  color: #1A1A1A !important;
27}

Zostaw oba selektory „a” i „p”. Obejmują one przyciski zarówno z linkiem, jak i bez niego. Reguły zaczynające się od[data-ogsb] i [data-ogsc] zapewniają dodatkową obsługę w niektórych aplikacjach Outlooka.

.elem-ID table td,
.elem-ID a,
.elem-ID p {
 background-image: linear-gradient(#FF6600, #FF6600) !important;
}

Jak zmienić kolory sekcji w trybie ciemnym

Dodaj ten kod do własnego CSS sekcji i zamień każdy .elem-ID na klasę sekcji:

1/* Style trybu ciemnego dla aplikacji obsługujących to zapytanie o media,
2  w tym obsługiwane wersje Apple Mail, Outlooka i Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID,
5  .elem-ID > table {
6    background-color: #1E1E1E !important;
7  }
 8
9  .elem-ID div > p,
10  .elem-ID div > h1,
11  .elem-ID div > h2,
12  .elem-ID div > h3,
13  .elem-ID li {
14    color: #F2F2F2 !important;
15  }
16}
17
18/* Dodatkowe reguły dotyczące tła dla Outlook.com i aplikacji mobilnych Outlook */
19[data-ogsb] .elem-ID,
20[data-ogsb] .elem-ID > table {
21  background-color: #1E1E1E !important;
22}
23
24/* Dodatkowe reguły tekstowe dla Outlook.com i aplikacji mobilnych Outlook */
25[data-ogsc] .elem-ID div > p,
26[data-ogsc] .elem-ID div > h1,
27 [data-ogsc] .elem-ID div > h2,
28[data-ogsc] .elem-ID div > h3,
29[data-ogsc] .elem-ID li {
30  color: #F2F2F2 !important;
31}

Ten przykład nadaje sekcji ciemne tło i jasny tekst. Dotyczy to zarówno sekcji standardowych, jak i o pełnej szerokości, a przyciski wewnątrz sekcji zachowują swoje własne kolory.

Kolumny z własnymi kolorami tła wymagają osobnych reguł. Fragmenty tekstu z indywidualnie przypisanymi kolorami mogą nadal być przetwarzane przez aplikację pocztową.

Jak zmienić tło wiadomości w trybie ciemnym

Dodaj ten przykład do własnego kodu CSS całej wiadomości, poniżej ustawień na poziomie wiadomości:

1/* Zmień tło wiadomości w aplikacjach obsługujących to zapytanie o media */
2@media (prefers-color-scheme: dark) {
3  body,
4  .elem-body {
5    background-color: #121212 !important;
 6  }
7}
8
9/* Dodatkowa reguła tła dla Outlook.com i aplikacji mobilnych Outlook */
10[data-ogsb] .elem-body {
11  background-color: #121212 !important;
12}

To zmienia tło wokół sekcji w obsługiwanych aplikacjach pocztowych. Sekcje z własnym tłem wymagają własnych stylów.

Nie zmieniaj klasy .elem-body. To rzeczywista klasa wiadomości, a nie tylko symbol zastępczy.

Aby zachować oryginalne tło wiadomości, zamień #121212 na kolor z trybu jasnego. Nie zapobiegnie to jednak zmianie tła przez wszystkie aplikacje pocztowe.

Jak sprawić, by ciemne logo było widoczne

Ciemne logo z przezroczystym tłem może stać się trudne do zauważenia, gdy obszar za nim stanie się ciemny. Możesz dodać jasne tło za obrazkiem.

Dodaj ten kod do sekcji „Własny CSS” bloku obrazu i zamień każdy.elem-ID na klasę bloku obrazka:

1/* Dodaj jasne tło w aplikacjach obsługujących to zapytanie o media */
2@media (prefers-color-scheme: dark) {
3  .elem-ID img {
4    background-color: #FFFFFF !important;
 5  }
6}
7
8/* Dodatkowa reguła tła dla Outlook.com i aplikacji mobilnych Outlook */
9[data-ogsb] .elem-ID img {
10  background-color: #FFFFFF !important;
11}
12
13/* Aplikacje Gmaila: zachowaj tło za obrazkiem.
14  Ta reguła działa też w trybie jasnym. */
15.elem-ID img {
16  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
17}

Zastąp wszędzie #FFFFFF kolorem tła sekcji w trybie jasnym. Gradient pomaga zachować to tło w aplikacjach Gmaila i działa również w trybie jasnym.

Obraz, który już ma jednolite tło, np. plik JPG, zazwyczaj nie wymaga tej korekty.

@media (prefers-color-scheme: dark) {
 .elem-ID img {
   content: url("https://example.com/logo-dark.png") !important;
 }
}

Dlaczego style wyglądają inaczej w różnych aplikacjach pocztowych

Aplikacje pocztowe różnie obsługują tryb ciemny. Komentarze w przykładach opisują zamierzone zastosowanie każdej techniki; nie gwarantują one jednak obsługi w każdej wersji aplikacji.

A co, jeśli Gmail zignoruje fragment kodu?

Spróbuj przenieść reguły specyficzne dla Outlooka – te zaczynające się od [data-ogsc] lub [data-ogsb] – do własnego CSS całej wiadomości, oddzielając je od pozostałych reguł bloku.

Zostaw własny CSS włączony dla danego bloku i pamiętaj, żeby w każdym selektorze podawać jego klasę.

Rozwiązywanie problemów

Jeśli żadne style nie działają, sprawdź, czy:

• Własny CSS jest włączony w każdym docelowym bloku.
• Każdy element .elem-ID został zastąpiony prawidłową klasą bloku.
• .elem-body pozostało niezmienione w regułach tła wiadomości.
• Aplikacja pocztowa odbiorcy obsługuje technikę, której używasz.
• Nie łączysz tych przykładów z wymuszonym trybem jasnym.

Zanim wyślesz wiadomość do swojej listy, koniecznie ją przetestuj.

1. Sprawdź wygląd zarówno w trybie jasnym, jak i ciemnym.
2. Wyślij wiadomości testowe do aplikacji pocztowych i urządzeń, z których korzystają Twoi odbiorcy.
3. Sprawdź kontrast tekstu, napisy na przyciskach, widoczność logo oraz tło wokół poszczególnych sekcji.
4. Upewnij się, że oryginalny projekt pozostaje czytelny tam, gdzie niestandardowe style nie są obsługiwane.
5. Powtórz testy po zmianie kolorów lub obrazów.

Uwaga: Podgląd trybu ciemnego w edytorze nie odzwierciedla zachowania każdej aplikacji pocztowej, a własny kod CSS nie jest wyświetlany w standardowym podglądzie wiadomości.