Полное руководство по темному режиму в email [+ фрагменты кода, инструменты, советы от Email-сообщества]

### Ключевые выводы

— Темный режим в email улучшает читаемость и пользовательский опыт, снижая нагрузку на глаза и экономя заряд батареи, что делает его критически важным элементом дизайна в современном email-маркетинге.

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

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

— Темный режим влияет на доступность: он полезен для одних пользователей, но создает трудности для других. Соблюдение лучших практик, таких как оптимизация контрастности, гарантирует, что письма останутся инклюзивными и читаемыми.

Темный режим. Технологическая индустрия начала гудеть от этих двух слов еще в 2018 году, когда Apple добавила темный режим в свой настольный почтовый клиент. В следующем году темный режим появился в iOS Mail, а другие гиганты индустрии, включая Gmail, объявили о поддержке темного режима.

Согласно данным Litmus о доле рынка почтовых клиентов, в 2022 году в среднем 35% открытий писем приходилось на темный режим, что демонстрирует стабильный рост год от года.

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

Считайте это вашим универсальным центром информации обо всем, что касается темного режима, включая код и хаки для темного режима, разработанные Litmus и сообществом email-маркетологов, а также список полезных инструментов для темного режима, которым доверяют и которые часто используют email-специалисты.

**Часть 1:** Полное руководство по темному режиму в email

### Что такое темный режим и почему люди его используют

Темный режим — это более темная цветовая палитра для условий низкой освещенности или ночного времени. Эта инвертированная цветовая схема использует светлую типографику, элементы пользовательского интерфейса и значки на темном фоне — и это один из самых горячих трендов в цифровом дизайне последних лет. От ОС Apple до приложений, таких как Twitter, Slack или Facebook Messenger, большинство популярных операционных систем и приложений теперь позволяют пользователям переключаться на темный режим.

Темный режим — горячая тема, и не зря. Многие люди предпочитают темный режим, потому что:

— Он меньше утомляет глаза. Светлый текст на темном фоне значительно лучше минимизирует нагрузку на глаза, особенно в условиях низкой освещенности.

— Он снижает яркость экрана, экономя заряд батареи.

— Он может улучшить читаемость контента и облегчить некоторым пользователям потребление контента на настольных и мобильных устройствах.

У них может быть просто предпочтение темных интерфейсов.

### Как клиенты применяют темный режим к моим письмам?

На данный момент существует три принципиально разных типа цветовых схем, которые почтовые клиенты используют для применения темного режима к письмам. Рассмотрим их по порядку (или перейдите сразу к таблице поддержки темного режима в почтовых клиентах).

#### Без изменения цветов

Да, вы правильно прочитали. Некоторые почтовые клиенты позволяют изменять свой пользовательский интерфейс на темный режим, но это никак не влияет на отображение вашего HTML-письма. Независимо от того, установлено ли приложение в светлом или темном режиме, ваше письмо будет выглядеть одинаково. Вот список таких клиентов:

— Apple Mail*

— Gmail Desktop

— AOL

— Yahoo Mail

*Не изменяет цветовой режим, если вы не укажете метатеги темного режима. Если вы укажете метатеги темного режима, но не добавите никаких стилей, они обеспечат частичное инвертирование.

Посмотрите на этот пример письма в Apple Mail: Дизайн письма остается прежним, независимо от того, просматриваете ли вы его в темном или светлом интерфейсе почтового клиента:

У Apple Mail есть несколько исключений: во-первых, письма в простом тексте активируют применение темы темного режима, и минимальный код, который блокирует применение темного режима к письму в простом тексте, — это изображение размером 2×1. Это сделано для того, чтобы вы могли включить пиксель отслеживания 1×1, сохраняя при этом ощущение «простого текста».

Во-вторых, если вы включите темный режим, как описано ниже, Apple Mail автоматически преобразует ваше письмо в версию для темного режима, используя частичное инвертирование (также описанное ниже).

#### Варианты темного режима: по умолчанию против пользовательского

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

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

#### Темные режимы по умолчанию: частичное инвертирование цветов

Первая тема темного режима, которую я называю «Частичное инвертирование цветов». Она определяет только области со светлым фоном и инвертирует их, так что светлые фоны становятся темными, а темный текст — светлым.

Обычно она не затрагивает области, уже имеющие темный фон, в результате чего получается полнофункциональный темный дизайн. К счастью, большинство почтовых клиентов, использующих этот метод, также поддерживают таргетинг темного режима, так что вы можете переопределить стандартную темную тему клиента.

Outlook.com — это почтовый клиент, который частично инвертирует цвета, как вы можете видеть на этом скриншоте:

#### Темные режимы по умолчанию: полное инвертирование цветов

Полное инвертирование цветов — наиболее инвазивная цветовая схема: она не только инвертирует области со светлым фоном, но и затрагивает темный фон.

Поэтому, если вы уже разработали свои письма с темной темой, эта схема будет иронично заставлять их становиться светлыми. К сожалению, это тактика, которую в настоящее время используют некоторые из наиболее популярных почтовых клиентов, такие как Gmail app (iOS), Outlook 2021 (Windows), Office 365 (Windows) и Windows Mail.

В приведенных ниже примерах вы можете видеть, что светлые фоны были преобразованы в темные версии исходных цветов, а области, которые ранее имели темный фон со светлым текстом, теперь стали светлыми с темным текстом.

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

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

В интересах защиты лучшей поддержки таргетинга темного режима и менее инвазивной логики тем темного режима вы можете напрямую связаться с командой доступности Gmail и поделиться скриншотами, где темный режим Gmail ломает ваше письмо.

### Различные методы таргетинга темного режима

Как отмечалось выше, как почтовые клиенты в темном режиме обрабатывают ваши обычные HTML-письма, будет варьироваться. Но что, если вы хотите применить собственные стили для темного режима, которые могут отличаться от стандартных цветовых схем почтовых клиентов? Существует два метода, которые вы можете использовать.

#### @media (prefers-color-scheme: dark)

Этот метод работает очень похоже на применение блока стилей внутри медиа-запроса для вашего мобильного адаптивного представления, за исключением того, что этот блок CSS нацелен на любой пользовательский интерфейс, установленный в темный режим. @media (prefers-color-scheme: dark) позволяет создавать наиболее надежные пользовательские темы темного режима, где вы можете реализовать все: от специфичных для темного режима замен изображений, эффектов наведения, фоновых изображений… в основном все, что можно сделать с помощью традиционного CSS! Этот метод требует добавления метатегов темного режима и стилей в вашего письма, чтобы он работал в Apple Mail.

#### [data-ogsc]/[data-ogsb]

Этот метод впервые был предложен Марком Роббинсом для таргетинга приложения Outlook. Не все стили работают с ним, но он работает для замены изображений в Outlook.com. Хотя это кажется довольно узким сегментом рынка, относительно легко просто дублировать стили @media (prefers-color-scheme: dark), которые вы уже применили, и просто добавить соответствующие префиксы [data-ogsc] к каждому CSS-правилу.

### Какие почтовые клиенты поддерживают темный режим?

Эти клиенты и приложения в настоящее время предлагают темный режим — либо как настройку, которую пользователь может установить вручную, либо путем автоматического обнаружения предпочтительной цветовой схемы пользователя:

#### Мобильные приложения

#### Настольные клиенты

— Apple Mail

— Outlook 2021 (Mac OS)

— Outlook 2021 (Windows)

— Office365 (MacOS)

— Office365 (Windows)

— Windows Mail

#### Веб-клиенты

Но только потому, что все эти почтовые клиенты предлагают способ установить их пользовательский интерфейс в темную цветовую схему, это не означает, что они одинаково обрабатывают ваши письма. Рендеринг писем — сложная задача. Письмо, которое отлично выглядит в одном клиенте, может выглядеть сломанным в другом. Теперь темный режим добавляет еще один уровень сложности. Как мы уже показали, существует множество способов, которыми почтовый клиент с темным режимом может обрабатывать ваш код.

И нет единообразной поддержки различных методов таргетинга. Так какой почтовый клиент следует какой цветовой схеме по умолчанию? В то время как некоторые не предоставляют дизайнерам email-рассылок никаких возможностей для таргетинга темного режима для оптимизации опыта чтения, несколько почтовых клиентов могут быть нацелены с помощью метода @media (prefers-color-scheme: dark) или [data-ogsc].

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

### Таблица поддержки темного режима в почтовых клиентах (по состоянию на февраль 2025 г.)

**Принудительное сохранение цвета фона таким же не влияет на цвет шрифта, и он все равно будет инвертироваться. Единственным исключением будут клиенты, полностью поддерживающие @media или [data-ogsc]; или приложение Gmail, где работает исправление цветового смешивания.

#### Таргетинг на Gmail iOS и Outlook Windows

Некоторые #EmailGeeks разработали блестящие решения для управления некоторыми из тем полного инвертирования, с которыми мы боремся. Каждое из этих решений настолько детальное, что требует отдельных руководств, поэтому обязательно ознакомьтесь с ними для полного объяснения!

Реми Парментье подготовил учебное пособие «Исправление проблем темного режима Gmail с помощью CSS Blend Modes», объединив mix-blend-mode и хак Gmail из HowToTarget.email, чтобы сохранить исходные цвета фона и текста для Gmail App iOS.

Николь Мерлин применила свои знания email-магии в «Как исправить проблемы темного режима Outlook», разработав два метода таргетинга Outlook для Windows с помощью специфичных для MSO градиентных CSS-свойств и очень классного трюка с VML (Vector Markup Language).

Однако предостережение при работе с этими хаками: поскольку оба этих метода имеют намеченный эффект принуждения почтового клиента к отображению исходных цветов текста и/или фона в режиме светлого режима там, где они применяются, вы рискуете проигнорировать предпочтения пользователей в отношении темного режима, что противоречит духу доступности. Убедитесь, что вы используете их экономно, например, для улучшения коэффициента контрастности, когда фон или текст преобразуются в темный режим нечитаемым образом.

Хотя эти методы таргетинга относительно ограничены по сравнению с тем, что вы можете сделать с помощью методов @media (prefers-color-scheme: dark) или [data-ogsc], они по-прежнему являются полезными инструментами на случай, если вам понадобится исправить проблемы, когда темный режим нарушает читаемость вашего текста.

### Как проектировать и кодировать для темного режима

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

#### 1. Оптимизируйте свои логотипы и другие изображения для всех стилей

Добавьте полупрозрачный контур к PNG-файлам с прозрачным фоном и темным текстом для лучшей читаемости в почтовых клиентах с ограниченными возможностями настройки темного режима, таких как Gmail App и Outlook 2019 (Windows).

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

Вы можете даже повеселиться с логотипом, оптимизированным для темного режима!

Ниже приведен пример вымышленного логотипа, который я создал: я не только добавил легкую тень за текстом, чтобы он выделялся на темном фоне, но и включил звездную текстуру за ним, чтобы соответствовать тематике галактики «NebulaCo».

Любой светлый полупрозрачный элемент, который вы встраиваете в свой логотип, будет невидимым в светлом режиме, послужит тактикой защитного дизайна и предоставит возможность добавить особую нотку брендинга, которая видна только в темном режиме.

Если ваши изображения не прозрачные и включают фон, убедитесь, что вокруг фокусного объекта достаточно полей, чтобы избежать неловкого соседства.

Кроме того, меняйте изображения для светлого и темного режимов с помощью методов @media (prefers-color-scheme: dark) и [data-ogsc], описанных ниже в этом руководстве.

И этот горячий совет для тех, кто использует Litmus Personalize для создания опросов, где вы не можете создавать отдельные версии изображений для светлого и темного режимов. Вот как мы решили эту проблему, когда включаем опросы Litmus Personalize в наши рассылки:

#### 2. Включите темный режим в пользовательских агентах почтовых клиентов

Включив эти метаданные в тег , вы можете обеспечить включение темного режима в вашем письме для подписчиков, у которых включен темный режим:

#### 3. Добавьте стили темного режима для @media (prefers-color-scheme: dark)

Добавьте этот медиа-запрос для темного режима в ваш встроенный раздел

для пользовательских стилей темного режима в iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS) и Outlook App (iOS).

Классы .dark-img и .light-img особенно полезны для отображения логотипа, специфичного для темного режима, если логотип с контуром не является идеальным.

Пример CSS:

@media (prefers-color-scheme: dark ) { /* Отображает контент только для темного режима, например изображения */ .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; } /* Скрывает контент только для светлого режима, например изображения */ .light-img { display:none; display:none !important; } /* Пользовательский цвет фона темного режима */ .darkmode { background-color: #272623 !important; } /* Пользовательские цвета шрифта темного режима */ h1, h2, p, span, a, b { color: #ffffff !important; } /* Пользовательский цвет ссылки текста темного режима */ .link { color: #91ADD4 !important; } }

#### 4. Дублируйте стили темного режима с префиксом [data-ogsc] или [data-ogsb]

Добавьте эту стилизацию для поддержки в приложении Outlook (Android).

Пример CSS:

/* Отображает контент только для темного режима, например изображения */ [data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; } /* Скрывает контент только для светлого режима, например изображения */ [data-ogsc] .light-img { display:none; display:none !important; } /* Пользовательский цвет фона темного режима */ [data-ogsc] .darkmode { background-color: #272623 !important; } /* Пользовательские цвета шрифта темного режима */ [data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; } /* Пользовательский цвет ссылки текста темного режима */ [data-ogsc] .link { color: #91ADD4 !important; }

#### 5. Примените стили только для темного режима к вашему телу HTML

Убедитесь, что все ваши HTML-теги имеют соответствующие классы для темного режима. Вот пример классов .dark-img и .light-img, как они отображаются в наших логотипах для светлого и темного режимов.

Пример HTML:

#### 6. ABT: Всегда тестируйте!

Как мы всегда упоминаем, почтовые клиенты постоянно меняются. Особенно с такой функцией, как темный режим, часты изменения в логике рендеринга. Единственный способ быть в курсе всего? Тестируйте каждое письмо и проводите QA email-рассылок с помощью такого инструмента, как Litmus.

## Оптимизация изображений для темного режима

Как сделать так, чтобы элементы изображений также отлично выглядели в темном режиме? Вот важные советы и приемы для оптимизации ваших изображений.

### Проектирование компонентов

Для ваших дизайнерских компонентов вы можете выбрать несколько стилистических вариантов:

Чтобы решить, какой подход лучше, спросите себя:

Что важнее для этой графики — сохранение ее первоначального вида и ощущения или обеспечение ее прозрачности?

— Если сохранение вида и ощущения имеет ключевое значение: поместите графику на фон и выровняйте изображение для единообразия.

— Если прозрачность является приоритетом: добавьте свечение или обводку, чтобы графика выделялась в темном режиме.

### Техники дизайна

#### Техника 1: Дизайн с использованием средних тонов

Один из подходов — сосредоточиться на средних тонах, учитывая при этом доступные коэффициенты контрастности.

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

#### Техника 2: Использование свечения или обводки

Свечение или сплошная белая обводка вокруг значка или логотипа также могут помочь с читаемостью, но это зависит от типа изображения или значка.

Для PNG-файлов с прозрачным фоном и темным текстом полупрозрачное свечение работает отлично.

#### Техника 3: Использование контура формы или фона

Не любите эффекты свечения? Вы можете поместить значок на фон, чтобы он не только выглядел прозрачным в светлом режиме, но и работал в темном режиме, где замена изображений не поддерживается.

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

### Использование APNG

Когда речь заходит об анимированных GIF-файлах, выбирайте APNG. Вместо использования GIF-файлов для добавления анимации в ваши письма попробуйте использовать APNG (Animated Portable Network Graphics).

GIF-файлы плохо поддерживают прозрачность:

Белые обводки могут стать пикселизированными из-за ограниченного цветового диапазона. С другой стороны, APNG, как правило, поддерживают прозрачность и имеют более широкий цветовой диапазон.

Заинтересованы в том, чтобы попробовать анимированные APNG? Мы рассказываем об этом здесь. И попробуйте Fable для вашего следующего APNG!

### Уважайте предпочтения пользователей в отношении темного режима

Одно из самых больших преимуществ темного режима — помощь в снижении нагрузки на глаза людей в условиях низкой освещенности или по другим личным причинам. Но это не вопрос «темный режим против светлого режима». Это вопрос того, чего хотят ваши подписчики, будь то темный или светлый опыт. Нет правильного или неправильного ответа.

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

## Темный режим и доступность email

Как упоминалось ранее, некоторые почтовые клиенты делают темный режим по своей сути недоступным. Хотя многие работают над улучшением этого, некоторые не позволяют разработчикам email-рассылок применять собственные стили. Без надлежащей реализации это может негативно сказаться на читаемости и доступности.

Давайте углубимся в то, что это означает на практике.

### Хорош или плох темный режим для доступности?

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

Хотя он может улучшить читаемость для одних, например, для людей с катарактой, он также может создавать проблемы с доступностью, в том числе для людей с дальтонизмом или дислексией. Ключевым моментом является предоставление возможности включить или отключить темный режим и обеспечение надлежащей контрастности в любом режиме.

### Решение проблем доступности email в темном режиме

Одна из основных проблем с письмами в темном режиме? Существует не одна версия (как обсуждалось ранее). Письмо в темном режиме может отображаться тремя различными способами:

— **Без изменения цветов:** письмо остается прежним, независимо от настроек пользовательского интерфейса.

— **Частичное инвертирование цветов:** светлые фоны инвертируются в темные.

— **Полное инвертирование цветов:** как светлые, так и темные фоны могут быть инвертированы.

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

Доступность — это просто

Создание доступных писем больше не является необязательным — это требование. Узнайте о влиянии доступности на бренды от двух отраслевых экспертов.

### Лучшие практики по созданию доступных писем в темном режиме

— **Обеспечьте высокие коэффициенты контрастности.** Убедитесь, что ваш текст хорошо читается на фоне как в светлом, так и в темном режимах.

— **Выбирайте доступные цвета.** Используйте комбинации цветов, которые легко различимы для людей с дальтонизмом.

— **Дизайн с использованием средних тонов для лучшей видимости.** Используйте палитру в основном из средних тонов, чтобы обеспечить контраст с обоими фонами, светлым и темным.

— **Приоритет выбора пользователя.** По возможности позвольте подписчикам переключаться между светлым и темным режимами.

— **Стремитесь к соответствию стандартам Web Content Accessibility Guidelines (WCAG).** Как минимум, убедитесь, что ваши цвета соответствуют уровню AA WCAG. Чтобы ваши письма могли читать все подписчики, стремитесь к уровню AAA.

— **Используйте инструменты, такие как Contrast Checker от WebAIM,** для оценки контрастности цветов.

— **Избегайте тонких шрифтов.** Светлый текст на темном фоне может ухудшить читаемость, а тонкий шрифт может затруднить чтение письма подписчиками. Если ваш бренд требует тонкого шрифта, сделайте его жирным в темном режиме для лучшей читаемости.

— **Избегайте чисто белого на чисто черном:** фон #FFFFFF (белый) на #000000 (черный) может вызвать утомление глаз и может быть автоматически инвертирован некоторыми почтовыми клиентами.

— **Тестируйте рендеринг ваших писем.** Поскольку темный режим ведет себя по-разному в различных почтовых клиентах, просматривайте свои письма в разных настройках перед отправкой. Проведите тест Litmus, чтобы увидеть, как ваше письмо отображается на более чем 100 клиентах и устройствах.

— **Используйте инструмент для предварительного просмотра ваших писем в темном режиме во время их создания.** Просматривайте изменения в реальном времени, легко оптимизируйте на ходу и быстро проверяйте проблемы с визуальной доступностью с помощью функции кодирования темного режима в Litmus Builder.

Создавайте письма, которые каждый сможет оценить

Максимизируйте эффект ваших писем, создавая доступный контент для всех. Проверка доступности всегда у вас под рукой с Litmus.

**Часть 2:** Фрагменты кода темного режима для email-разработчиков

### Как проектировать и кодировать письма для темного режима

Ниже приведены девять фрагментов кода от сообщества email-маркетологов, которые помогут решить ваши главные проблемы с темным режимом.

### Метатеги темного режима

### Таргетинг на Android/Outlook.com для темного режима

### Таргетинг на Apple/iOS для темного режима

### Переопределение цветов фона темного режима

Источник: Annett Forcier. Получите код в Litmus Community →

### Сохранение белого текста белым в темном режиме Gmail

Источник: Rémi Parmentier. Получите код в Litmus Community →

### Сохранение одинакового цвета текста в темном режиме Outlook

Источник: Nicole Merlin. Получите код в Litmus Community →

### Отображение/скрытие изображений для темного режима

### Исправление цветов фона кнопок VML для темного режима

### Использование не совсем белых/не совсем черных цветов для предотвращения изменения цвета в темном режиме

Источник: Ted Goas/Paul Airy. Получите код в Litmus Community →

**Часть 3:** Инструменты и советы по темному режиму

### Любимые инструменты и советы по темному режиму от Email-сообщества

Каким лучшим практикам, инструментам и ресурсам по темному режиму доверяют ваши коллеги #EmailGeeks для получения дополнительной информации и преодоления его трудностей?

Ознакомьтесь с этим постоянно растущим списком внешних источников, рекомендованных сообществом email-маркетологов.

Отсутствует ли ваш любимый инструмент для темного режима в этом списке? Сообщите нам, отправив письмо по адресу hello@litmus.com — мы хотим, чтобы этот список был ценным для всех пользователей и актуальным.

### 1. Узнайте о темном режиме в ⚡AMP Email

Поддержка темного режима необходима не только для HTML-писем, но и для писем на базе AMP.

Есть плохие новости: в настоящее время нет поддержки кодирования писем для темного режима в AMP Email. Однако Бенджамин Джан обнаружил альтернативное решение, которое поможет вашим AMP Email отлично выглядеть в светлом и темном режиме. Вот как.

### 2. Сохраняйте текстовое содержимое как черный текст на белом фоне

«Одна простая вещь, которая хорошо работает, — это сохранять текстовое содержимое как черный текст на белом фоне. Это означает некоторые ограничения для вашего дизайна, но есть еще много возможностей для творчества вокруг текста и обеспечения отличного внешнего вида».

Источник: Mark Robbins

### 3. Установите базовые стили для темного режима, обновляйте цвета в соответствии с дизайном

Добавьте эти базовые стили ко всем вашим стандартным шаблонам email-рассылок, чтобы гарантировать, что каждое ваше письмо будет готово к темному режиму, даже если вы забыли явно настроить стили темного режима.

darkbg { background-color: black !important; } .h1 { color: white !important; } .h2 { color: white !important; } .button { background-color: white !important; color: black !important; }

Источник: Emmanuel Arizmendi

### 4. Ресурсы для автоматически инвертирующих почтовых клиентов

Outlook и Gmail полностью инвертируют цветовую схему ваших писем для поддержки темного режима. Хотя мы не можем нацеливаться на эти клиенты, эти потрясающие email-специалисты имеют несколько советов, которые помогут вам извлечь максимум пользы из этих ситуаций.

— @Outlook: https://webdesign.tutsplus.com/tutorials/how-to-fix-outlook-dark-mode-problems—cms-37718

— @Gmail: https://hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/

Источник: Emmanuel Arizmendi

### 5. Создание HTML-письма, реагирующего на кнопку Outlook.com в темном и светлом режимах

Удобная функция Outlook.com — это кнопка светлого/темного режима, где пользователи могут вручную выбрать, какую версию они хотят использовать для просмотра писем. К сожалению, эта удобная функция имеет недостаток. Некоторые пользователи видят темную версию вашего письма вместо светлой, даже если они выбрали просмотр писем в Outlook.com в светлом режиме.

Источник: Rémi Parmentier через Wilbert Heinen

### 6. Как исправить проблемы темного режима Outlook

Из-за полного инвертирования в Microsoft Outlook ваши подписчики могут видеть непредсказуемые изменения цвета текста в Outlook. Эти изменения могут затруднить чтение ваших писем. У разработчика email-рассылок Николь Мерлин есть способ обойти это.

Источник: Nicole Merlin

*Изначально опубликовано Alice Li в ноябре 2019 г.*