Dark Mode в имейлите: Пълното ръководство

Стъпка 1: Добавете meta тагове за Dark Mode

Добавете тези meta тагове в <head> на имейла си, за да заявите поддръжка на dark mode. Така имейл клиентите разбират, че имейлът е подготвен както за светъл, така и за тъмен режим, а в Apple Mail това активира и media заявката.

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

Стъпка 2: Добавете CSS декларация за цветова схема

Подсилете декларацията от meta таговете, като добавите CSS свойството color-scheme във вградените си стилове. Това дава допълнителен сигнал към имейл клиентите.

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

Стъпка 3: Напишете своите @media стилове за Dark Mode

Добавете собствени стилове за dark mode в media заявка с prefers-color-scheme. Включете класове за фонове, цветове на текста, цветове на линковете и правила за показване и скриване на изображения.

@media (prefers-color-scheme: dark) {
  .darkmode { background-color: #272623 !important; }

  .dark-img {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    max-height: inherit !important;
    max-width: inherit !important;
  }

  .light-img {
    display: none !important;
  }

  h1, h2, h3, p, span, a, b {
    color: #ffffff !important;
  }

  .link { color: #91ADD4 !important; }
}

Стъпка 4: Дублирайте стиловете с префикс [data-ogsc]

За да осигурите поддръжка в Outlook приложението за Android и iOS, дублирайте всички свои стилове за dark mode от media заявката с префикс [data-ogsc] . Това се прави лесно, защото използвате същите правила с нов префикс.

[data-ogsc] .darkmode {
  background-color: #272623 !important;
}
[data-ogsc] .dark-img {
  display: block !important;
  width: auto !important;
  overflow: visible !important;
}
[data-ogsc] .light-img {
  display: none !important;
}
[data-ogsc] h1, [data-ogsc] h2,
[data-ogsc] p, [data-ogsc] span,
[data-ogsc] a, [data-ogsc] b {
  color: #ffffff !important;
}

Стъпка 5: Внедрете смяна на изображения в HTML

Използвайте отделни версии на логото и основните графични елементи за светъл и тъмен режим. Изображението за светъл режим се показва по подразбиране, а това за тъмен режим се скрива с inline CSS и се показва чрез класовете за Dark Mode. Обгърнете изображението за тъмен режим в MSO условни коментари, за да го скриете от Outlook за десктоп.

<!-- Light mode logo (default) -->
<img class="light-img" src="logo-dark.png"
  width="163" height="60" alt="Brand Logo" />

<!-- Dark mode logo (hidden by default) -->
<!--[if !mso]><!-->
<div class="dark-img" style="display:none;
  overflow:hidden; max-height:0px;
  max-width:0px; visibility:hidden;">
  <img src="logo-light.png"
    width="163" height="60" alt="Brand Logo" />
</div>
<!--<![endif]-->

Стъпка 6: Тествайте във всички основни клиенти

Имейл клиентите непрекъснато променят логиката си за визуализиране в Dark Mode. Тествайте всеки имейл както в светъл, така и в тъмен режим при основните клиенти. Използвайте инструменти като Litmus или Email on Acid за пълни прегледи. Обърнете специално внимание на Gmail за iOS, Outlook за Windows и Apple Mail, защото тези три клиента покриват най-широкия диапазон от поведения при визуализиране.