Как с помощью пользовательского CSS настроить внешний вид моего письма в тёмном режиме?

В редакторе писем ты можешь использовать пользовательский CSS, чтобы изменить цвета кнопок и разделов, настроить фон сообщения и сделать так, чтобы логотипы оставались видимыми в тёмном режиме. Также можно сохранить выбранные цвета из дизайна для светлого режима.

При подготовке письма можешь начать с базовых настроек темного режима. Если твоему письму всё же нужны доработки — например, логотип стал плохо виден или цвета кнопок потеряли контраст — можешь использовать пользовательский CSS для точной настройки его внешнего вида.

Что нужно, чтобы добавить собственные стили для темного режима

Тебе нужен доступ к Пользовательскому CSS и знание CSS. См. раздел Как использовать опцию “Пользовательский CSS” в редакторе писем?.

Тебе нужно включить Пользовательский CSS для каждого блока, на который ты хочешь повлиять. Без этого CSS-класс блока не добавится в отправляемое письмо, и пользовательские стили не будут применяться. Это также касается случаев, когда ты добавляешь код ко всему сообщению.

Добавление пользовательского CSS к блоку

Чтобы подготовить блок:

1. Выбери кнопку, раздел или изображение, которое хочешь настроить.
2. Включи функцию Добавить пользовательский CSS на панели справа.
3. В поле CSS введи .elem, чтобы отобразить класс выбранного блока.
4. Скопируй этот класс и замени им все .elem-ID в выбранном примере.

Например, замени .elem-ID на класс, такой как .elem-image-5dc6501190a6. Класс будет разным для каждого блока.

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

Как изменить цвета кнопок в тёмном режиме

Добавь следующий код в поле Пользовательский CSS кнопки. Замени каждый .elem-ID на класс кнопки.

В этом примере используется светло-оранжевый фон и тёмный текст в поддерживающих эту функцию почтовых приложениях.

1/* Dark mode styles for apps that support this media query,
2   including supported versions of Apple Mail, Outlook, and 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/* Additional background rules for Outlook.com and Outlook mobile apps */
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/* Additional text rules for Outlook.com and Outlook mobile apps */
24[data-ogsc] .elem-ID a,
25[data-ogsc] .elem-ID p {
26  color: #1A1A1A !important;
27}

Оставь оба селектора a и p. Они охватывают кнопки как со ссылкой, так и без нее. Правила, начинающиеся с[data-ogsb] и [data-ogsc], обеспечивают дополнительную поддержку в некоторых приложениях Outlook.

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

Как изменить цвета разделов в тёмном режиме

Добавь этот код в поле Пользовательский CSS раздела и замени каждый .elem-ID на класс раздела:

1/* Dark mode styles for apps that support this media query,
2   including supported versions of Apple Mail, Outlook, and 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/* Additional background rules for Outlook.com and Outlook mobile apps */
19[data-ogsb] .elem-ID,
20[data-ogsb] .elem-ID > table {
21  background-color: #1E1E1E !important;
22}
23
24/* Additional text rules for Outlook.com and Outlook mobile apps */
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}

В этом примере разделу присваивается тёмный фон и светлый текст. Он охватывает стандартные разделы и разделы полной ширины, при этом кнопки внутри раздела сохраняют свои собственные цвета.

Для колонок с собственными цветами фона нужны отдельные правила. Фрагменты текста с индивидуально назначенными цветами по-прежнему могут обрабатываться почтовым приложением.

Как изменить фон сообщения в тёмном режиме

Добавь этот пример в пользовательский CSS всего сообщения, ниже настроек на уровне сообщения:

1/* Change the message background in apps that support this media query */
2@media (prefers-color-scheme: dark) {
3  body,
4  .elem-body {
5    background-color: #121212 !important;
6  }
7}
8
9/* Additional background rule for Outlook.com and Outlook mobile apps */
10[data-ogsb] .elem-body {
11  background-color: #121212 !important;
12}

Это изменит фон вокруг твоих разделов в поддерживаемых почтовых приложениях. Разделы со своим собственным фоном требуют отдельных стилей.

Оставь .elem-body без изменений. Это фактический класс сообщения, а не просто заполнитель.

Чтобы сохранить исходный фон сообщения, замени #121212 на соответствующий цвет в светлом режиме. Это не помешает всем почтовым приложениям изменять фон.

Как сделать так, чтобы тёмный логотип оставался видимым

Тёмный логотип с прозрачным фоном может стать плохо заметным, когда область за ним становится тёмной. Ты можешь добавить светлый фон за изображением.

Добавь этот код в поле «Пользовательский CSS» блока изображения и замени каждый .elem-ID на класс блока изображения:

1/* Add a light background in apps that support this media query */
2@media (prefers-color-scheme: dark) {
3  .elem-ID img {
4    background-color: #FFFFFF !important;
5  }
6}
7
8/* Additional background rule for Outlook.com and Outlook mobile apps */
9[data-ogsb] .elem-ID img {
10  background-color: #FFFFFF !important;
11}
12
13/* Gmail apps: preserve the background behind the image.
14   This rule also applies in light mode. */
15.elem-ID img {
16  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
17}

Замени везде #FFFFFF на цвет фона раздела в светлом режиме. Градиент помогает сохранить этот фон в приложениях Gmail и также работает в светлом режиме.

Изображение, у которого уже есть однотонный фон, например JPG, обычно не требует такой настройки.

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

Почему стили выглядят по-разному в разных почтовых приложениях

Почтовые приложения по-разному обрабатывают тёмный режим. Комментарии в примерах описывают, как следует использовать каждый приём; они не гарантируют поддержку во всех версиях приложения.

Что делать, если Gmail игнорирует фрагмент кода?

Попробуй переместить правила, специфичные для Outlook — те, что начинаются с [data-ogsc] или [data-ogsb] — в пользовательский CSS всего сообщения, отдельно от остальных правил блока.

Оставь пользовательский CSS включенным для целевого блока и указывай его класс во всех селекторах.

Устранение неполадок

Если ни один из стилей не применяется, проверь:

• Пользовательский CSS включен для каждого целевого блока.
• Каждый .elem-ID был заменён на правильный класс блока.
• .elem-body остался без изменений в правилах фона сообщения.
• Приложение электронной почты получателя поддерживает используемую тобой технологию.
• Ты не сочетаешь эти примеры с принудительным светлым режимом.

Перед отправкой сообщения по списку обязательно протестируй его.

1. Проверь оформление как в светлом, так и в тёмном режиме.
2. Отправь тестовые письма в почтовые приложения и на устройства, которыми пользуются твои получатели.
3. Проверь контрастность текста, надписи на кнопках, видимость логотипа и фон вокруг разделов.
4. Убедись, что исходный дизайн остаётся читабельным там, где не поддерживаются пользовательские стили.
5. Повтори тесты после изменения цветов или изображений.

Примечание: предварительный просмотр в тёмном режимередактора не воспроизводит поведение всех почтовых приложений, а пользовательский CSS не отображается в стандартном предварительном просмотре сообщения.