Темний режим в листах

Темний режим — це колірна схема зі світлим текстом на темному фоні. Поштові клієнти можуть відображати листи в темному режимі залежно від налаштувань пристрою, браузера або самого поштового клієнта отримувача. Ви не можете повністю контролювати, чи буде лист відображено в темному режимі та як саме він виглядатиме, адже кожен поштовий клієнт застосовує власні правила рендерингу. Але ви можете зменшити ризики: враховувати темний режим під час дизайну листа, використовувати Емуляцію теми для попередньої перевірки та тестувати листи в реальних поштових клієнтах перед запуском.

Багато отримувачів читають листи в темному режимі принаймні час від часу, тому проблеми з відображенням у темному режимі — не поодинокі випадки. У цій статті розглянемо, як поштові клієнти рендерять листи в темному режимі, як зменшити ризики некоректного відображення в Адаптивному email-редакторі eSputnik і як використовувати Емуляцію теми перед фінальним тестуванням у реальних поштових скриньках.

Як поштові клієнти рендерять листи в темному режимі

Поштові клієнти не рендерять темний режим однаково. На практиці їхню поведінку можна умовно поділити на три основні патерни: без зміни кольорів, часткова інверсія кольорів і повна інверсія кольорів.

Модель	Що відбувається	Типові приклади	Основний ризик
Без зміни кольорів	Інтерфейс поштового клієнта або вебпошти стає темним, але сам лист залишається без змін.	Gmail у вебверсії, Yahoo Mail, Apple Mail без заявленої підтримки темного режиму.	Лист може виглядати занадто яскравим у темному інтерфейсі.
Часткова інверсія кольорів	Світлі ділянки затемнюються, темний текст стає світлим, але частина зображень і брендованих кольорів може залишатися без змін.	Apple Mail / iOS Mail із заявленою підтримкою темного режиму, Outlook.com, мобільні застосунки Outlook, Gmail на Android.	Темний текст, іконки або блоки можуть втратити контраст після зміни фону.
Повна інверсія кольорів	Клієнт може інвертувати більшість кольорів, іноді навіть частини зображень.	Gmail на iOS, Outlook для Windows, Office 365 для Windows, Windows Mail.	Темний дизайн може стати світлим, а брендовані кольори — змінитися непередбачувано.

📘
Приклади вище — це практичний орієнтир, а не гарантія. Поштові клієнти оновлюють логіку роботи темного режиму, і той самий клієнт може поводитися по-різному на різних платформах. Завжди тестуйте лист перед відправленням.

Як оптимізувати листи для темного режиму в eSputnik

Найбезпечніший підхід — поступове покращення: спочатку створіть якісний лист для світлого режиму, потім зробіть його стійкішим до інверсії кольорів і лише після цього додавайте стилі для темного режиму для клієнтів, які їх підтримують.

Ці техніки зменшують ризики, але не забезпечують однакове відображення листа в усіх поштових клієнтах.

Обирайте безпечніші нейтральні кольори

Чисті #FFFFFF і #000000 можуть створювати занадто різкий контраст або спричиняти помітні зміни кольорів у деяких поштових клієнтах із темним режимом. Це не завжди головна причина проблем, але м’якші нейтральні кольори зазвичай безпечніші.

Для великих фонових ділянок, текстових блоків і кнопок варто розглянути:

світлі нейтральні відтінки, наприклад #F0F0F0;
темні нейтральні відтінки, наприклад #1A1A1A;
м’якші варіації брендованих кольорів для великих поверхонь.

Налаштуйте основну палітру в Загальних стилях, а потім за потреби змініть кольори окремих структур, блоків, кнопок і тексту.

Близькі відтінки, наприклад #FFFFFE замість #FFFFFF або #000001 замість #000000, іноді можуть зменшити небажану інверсію. Сприймайте це як обхідний прийом, а не гарантоване рішення, і завжди перевіряйте результат.

Захищайте логотипи та зображення

Зображення — одна з найпоширеніших проблемних зон у темному режимі. Темний логотип може зникнути на темному фоні, а зображення з білою рамкою — виглядати як небажаний яскравий прямокутник.

Для логотипів та іконок зазвичай краще використовувати прозорі PNG, а не файли із суцільним фоном: так елементи краще адаптуються до відрендереного фону. Водночас прозорість не гарантує, що кожен поштовий клієнт збереже початкові кольори логотипа або іконки.

Світлий контур, легке світіння або безпечний фоновий контейнер допоможуть темному логотипу залишатися помітним, якщо фон навколо нього стане темним. Це особливо важливо для брендованих знаків, піктограм застосунків і графічних елементів, які мають лише світлу або лише темну версію.

Для непрозорих зображень залишайте достатньо відступів навколо головного об’єкта, щоб зображення не виглядало затиснутим після зміни фону навколо нього. Фотографії зазвичай варто залишати звичайними зображеннями, якщо фон є частиною контенту.

Не розміщуйте важливу інформацію лише всередині зображень. Якщо головний банер містить промоакцію, персональну добірку товарів, нагадування про покинутий кошик або пропозицію знижки, продублюйте ключову інформацію звичайним текстом у тілі листа.

Додавайте стилі для темного режиму в редакторі коду

Якщо ви працюєте з повним HTML-кодом листа в Редакторі коду, додайте meta-теги для темного режиму в <head> листа:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Підтримку колірних схем також можна продублювати в CSS:

<style>
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }
</style>

Після цього додайте scoped-стилі для тих частин шаблону, які ви хочете контролювати:

<style>
  @media (prefers-color-scheme: dark) {
    .email-dark {
      background-color: #1A1A1A !important;
    }

    .email-dark .dark-text {
      color: #F0F0F0 !important;
    }

    .email-dark .cta {
      background-color: #FFFFFF !important;
      color: #1A1A1A !important;
    }
  }
</style>

Застосовуйте ці класи лише до тих структур, текстових елементів і кнопок, які потрібно контролювати в темному режимі.

Уникайте широких глобальних перевизначень, якщо не контролюєте всю структуру шаблону. Наприклад, правило для всіх h1, h2, p, a і span може ненавмисно вплинути на футер, посилання відписки, юридичний текст, прихований прехедер або другорядні посилання.

@media (prefers-color-scheme: dark) — це покращення для клієнтів, які підтримують таке правило. Не покладайтеся на нього в Gmail-застосунках, клієнтах із повною інверсією кольорів або клієнтах, які змінюють чи ігнорують цей media query.

Для Outlook.com і деяких застосунків Outlook можуть допомогти спеціальні селектори:

<style>
  [data-ogsc] .email-dark .dark-text {
    color: #F0F0F0 !important;
  }

  [data-ogsb] .email-dark {
    background-color: #1A1A1A !important;
  }
</style>

Ці селектори не розв’язують усі проблеми темного режиму в Outlook для Windows. Сприймайте їх як покращення для окремих Outlook-клієнтів і тестуйте Outlook desktop та Outlook mobile окремо.

🚧
Коли ви редагуєте HTML/CSS вручну, ви відповідаєте за валідність коду, адаптивність і відображення в поштових клієнтах. Особливо ретельно тестуйте такі зміни.

Використовуйте окремі зображення для світлого й темного режимів

Деякі клієнти, що підтримують @media (prefers-color-scheme: dark), можуть показувати різні зображення залежно від режиму. Наприклад, у світлому режимі можна показати темний логотип, а в темному — світлий.

<style>
  @media (prefers-color-scheme: dark) {
    .light-img {
      display: none !important;
    }

    .dark-img {
      display: block !important;
    }
  }
</style>

Заміна зображень не є універсальним fallback-рішенням. Вона може не спрацювати в Gmail-застосунках або клієнтах із повною інверсією кольорів, тому важливі логотипи та іконки мають залишатися читабельними навіть тоді, коли заміна не спрацює. Прозорий PNG, безпечний фон, контур або легке світіння зазвичай надійніші як базовий захист.

Зберігайте достатній контраст

Текст, кнопки, посилання та іконки мають залишатися читабельними у світлому й темному режимах. Тонкі шрифти на темному фоні особливо ризиковані. Якщо ваш бренд використовує легке накреслення, для темного режиму варто збільшити товщину шрифту.

Для основного тексту орієнтуйтеся на контраст не нижче 4.5:1 відповідно до WCAG AA. Перевірити палітру можна за допомогою WebAIM Contrast Checker.

Чого ці рішення не гарантують

Оптимізація під темний режим зменшує ризики, але не дає повного контролю. Gmail на iOS, Gmail на Android, Outlook для Windows, мобільні застосунки Outlook, Apple Mail та інші клієнти можуть по-різному змінювати кольори, текст, фони, кнопки або зображення.

Користувацький CSS, заміна зображень, нейтральні кольори й контури для логотипів допомагають запобігти типовим проблемам, але не замінюють тестування в реальних поштових клієнтах.

Перевірка темного режиму через Емуляцію теми

В eSputnik можна переглянути шаблон у світлому й темному режимах безпосередньо в редакторі.

На панелі Керування повідомленнями натисніть стрілку поруч із перемикачем desktop/mobile, щоб відкрити Емуляцію теми. Перемикайтеся між іконками сонця й місяця, щоб переглянути шаблон у світлому або темному режимі, а потім використайте перемикач desktop/mobile, щоб перевірити обидва макети.

Цей перегляд допомагає швидко помітити очевидні проблеми:

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

🚧
Перегляд у редакторі — це не тест у реальній поштовій скриньці. Він показує приблизний вигляд у темному режимі, але не відтворює точну поведінку Gmail, Apple Mail, Outlook або іншого поштового клієнта. Кожен клієнт застосовує власну логіку темного режиму вже після доставки листа.

Використовуйте цей перегляд для швидкої перевірки дизайну, а фінальний результат підтверджуйте в реальних поштових клієнтах.

Тестування в реальних поштових клієнтах

Перед відправленням натисніть Протестувати в редакторі й відкрийте лист у тих поштових клієнтах, які найважливіші для вашої аудиторії.

Передусім перевіряйте:

Gmail на iOS і Android;
Apple Mail;
Outlook desktop і mobile;
інші клієнти, важливі для вашої аудиторії.

Перевіряйте світлий і темний режими. Особливу увагу звертайте на логотипи, іконки, CTA-кнопки, контраст тексту, посилання, футер, посилання відписки, юридичний текст і зображення зі світлим фоном.

Повторно тестуйте лист після суттєвих змін у шаблоні, а також періодично перевіряйте повторно використовувані шаблони, адже поведінка поштових клієнтів може змінюватися.

Усунення проблем із темним режимом

Проблема	Імовірна причина	Що спробувати
Темний логотип зникає	Прозорий або темний логотип відображається на темному фоні.	Додайте світлий контур або легке світіння, використайте безпечний контейнер або підготуйте світлу версію логотипа.
Білі кути зображення стають помітними	Зображення має білий фон або видимі кути.	Використайте прозорий PNG, обріжте зображення або заокругліть кути в самому файлі.
CTA втрачає контраст	Кольори кнопки й тексту інвертуються по-різному.	Перевіряйте фон кнопки й текст разом, використовуйте контрастніші кольори.
Іконки погано видно	Колір іконок змінюється або зливається з відрендереним фоном.	Тестуйте іконки окремо й уникайте наборів лише зі світлими або лише з темними іконками.
Футер, юридичний текст або посилання відписки стають нечитабельними	Глобальні CSS-перевизначення або інверсія на боці клієнта вплинули на другорядний текст.	Використовуйте scoped-класи й перевіряйте футер під час кожного тестування.
Темний дизайн стає світлим	Лист відкрито в клієнті з повною інверсією кольорів.	Не покладайтеся на дизайн лише для темного режиму й використовуйте кольори, які витримують інверсію.
Користувацький CSS для темного режиму ігнорується	Клієнт не підтримує `@media (prefers-color-scheme: dark)` або змінює це правило.	Сприймайте CSS як поступове покращення й спирайтеся на стійкий базовий дизайн.
Outlook неочікувано змінює кольори	Outlook застосовує власну логіку темного режиму.	Тестуйте Outlook desktop і mobile окремо; використовуйте Outlook-специфічні рішення лише за потреби.

Чекліст для темного режиму

Перед відправленням листа перевірте, що:

шаблон не покладається на чисті #FFFFFF або #000000 у ключових зонах;
логотипи та іконки залишаються помітними на темному фоні;
іконки протестовані окремо від логотипів;
CTA-кнопки мають достатній контраст в обох режимах;
посилання помітні й відрізняються від основного тексту;
текст читабельний у світлому й темному режимах;
футер, посилання відписки та юридичний текст залишаються читабельними;
важлива інформація не розміщена лише всередині зображень;
заміна зображень використовується як покращення, а не як єдиний fallback;
шаблон перевірено через Емуляцію теми;
лист протестовано в найважливіших для вашої аудиторії клієнтах, а не лише в універсальних прев’ю.

Підсумок

Ви не можете повністю контролювати, як кожен поштовий клієнт рендерить лист у темному режимі, але можете зменшити ризик типових проблем із відображенням. Обирайте кольори з урахуванням темного режиму, перевіряйте логотипи й зображення на темному фоні, зберігайте достатній контраст і обережно додавайте користувацькі стилі, якщо працюєте з повним HTML-кодом.

Сприймайте оптимізацію під темний режим як зменшення ризиків, а не як повний контроль. Перевірте шаблон через Емуляцію теми, а потім підтвердьте результат у реальних поштових клієнтах.

Пов’язані статті

Updated about 2 hours ago

Did this page help you?