Переопределить фон кнопки темного режима Outlook - PullRequest
Новая
       97

Переопределить фон кнопки темного режима Outlook

0 голосов
/ 07 мая 2020

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

enter image description here

HTML для кнопки выглядит как следует: 

<td align="center" style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">
  <a href="{{action_url}}" class="f-fallback button" target="_blank" style="color: #fff; border-color: #13c2c2; border-style: solid; border-width: 10px 18px; background-color: #13c2c2 !important; background-image: linear-gradient(#13c2c2, #13c2c2) !important; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); -webkit-text-size-adjust: none; box-sizing: border-box;">Reset your password</a>
</td>

Кнопка имеет следующий встроенный стиль (отформатированный для вашего удобства): 

color: #fff;
border-color: #13c2c2;
border-style: solid;
border-width: 10px 18px;
background-color: #13c2c2 !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;
display: inline-block;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
-webkit-text-size-adjust: none;
box-sizing: border-box;

Кроме того, я уже добавил следующее в раздел <head> моя электронная почта. 

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

Спасибо!

Ответы [ 4 ]

2 голосов
/ 07 мая 2020

Плохая новость заключается в том, что мы не можем специально настроить таргетинг на Dark Mode с помощью CSS в электронной почте с помощью запроса @media или сгенерированного имени класса для Gmail или Outlook. Gmail заменяет цветовые значения на листе, а Outlook встроит цветовые значения в темном режиме и добавляет к ним! Important, что делает невозможным его переопределение на листе.

Решение

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

Удачи.

0 голосов
/ 25 августа 2020

Уберите элемент background-color на вашем теге. У вас уже есть 

background-image:linear-gradient(#13c2c2, #13c2c2)

, и это все, что вам нужно.

0 голосов
/ 29 мая 2020

Ну, это не совсем правда, что вы не можете изменить цвет фона на то, что установлено для границы. Вы на самом деле можете изменить это, чтобы решить эту чертову sh проблему в Outlook. Хотя иногда, и этот случай из тех, что «иногда».

Вы уже используете background-image, и это действительно путь к go. Замените linear-gradient файлом .png размером 1x1 пиксель, который точно содержит этот цвет границы, и повторите это. Этот цвет не будет инвертирован - в конце концов, это изображение. Для совместимости вы можете попробовать применить background="file here" в качестве атрибута. Он будет повторяться бесконечно, но это именно то, что мы хотим. Однако цвет останется белым, если вы не сделаете всю кнопку отдельным изображением.

0 голосов
/ 11 мая 2020

Какой прогноз? (Рабочий стол Outlook для Windows, 2007-19? Рабочий стол Outlook для Ma c? Outlook на Android? iOS? Веб-почта Outlook.com/365?)

Вы можете попробовать этот трюк, любезно предоставленный Реми Парментье (я говорю «может», потому что у меня нет кода для вашей кнопки): 

<a style="color:blue;">
  <span class="dark-mode-red">…</span>
</a>

И это в вашем разделе <head>: 

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark"> 
<style type="text/css">
@media (prefers-color-scheme: dark) {
  .dark-mode-red {color:red !important}
}
</style>

Таким образом, удалите background-image: linear-gradient(#13c2c2, #13c2c2) !important; из встроенного раздела (все встроенное будет переведено) и присоедините его к стилю @media темного режима.

Это полный рабочий пример (хотя Outlook Office 365 Windows показывает черный текст): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark"> 
<style type="text/css">

@media (prefers-color-scheme: dark) {
  .darkbutton {
    color:#ffffff !important;
      background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}

</style>


</head>
<body>
    <td align="center" style="word-break: break-word; font-family:  Helvetica, Arial, sans-serif; font-size: 16px;">
  <a href="https://www.google.com" class="darkbutton" target="_blank" style="color: #ffffff; border-color: #13c2c2; border-style: solid; border-width: 10px 18px; background-color: #13c2c2 ; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); -webkit-text-size-adjust: none; box-sizing: border-box;">Reset your password</a>
</td>
</body>
</html>
...