Переопределить фон кнопки темного режима Outlook
Я пытаюсь добавить поддержку темного режима в свои шаблоны электронной почты, однако у меня возникла проблема с Outlook. По какой-то причине Outlook частично переопределяет фон моей кнопки, из-за чего он отображается неправильно:
HTML-код кнопки выглядит следующим образом:
<td align="center" style="word-break: break-word; font-family: "Nunito Sans", 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" />
Спасибо!
6 ответов
Плохая новость заключается в том, что мы не можем специально настроить темный режим через CSS в электронной почте с помощью запроса @media или сгенерированного имени класса для Gmail или Outlook. Gmail заменяет значения цвета на листе, а Outlook вставляет значения цвета темного режима и добавляет к ним! Important, что делает невозможным его переопределение на листе.
Решение
Пока Google и Microsoft не предложат решение, лучший подход - признать, что это реальность, и разработать электронные письма, которые работают независимо от того, какой цвет фона выбирает пользователь для их просмотра. Все больше пользователей переходят на темный режим, так что в будущем он станет еще более популярным.
Удачи.
Outlook.com и Outlook (Windows/Mac/Android/iOS) инвертируют / корректируют большинство цветов, но по какой-то причине они не корректируют цвета границ, поэтому ваш
<a> границы тега имеют исходный цвет, но
background-color из
<a>был настроен для темного режима. Это скорее ответ, чем решение, просто чтобы объяснить, что здесь происходит.
Изображение 1x1px фон + цвет = пуленепробиваемый цвет кнопки:
<a href="https://ilovecode.com" width:auto;font-family:Roboto, arial, sans-serif;font-size:16px;color:#ffffff;border-style:solid;border-color:#59BC2B;border-width:10px 20px;display:inline-block;background-color:#59BC2B;background-image:url(https://path-to-the-1px-image.png);text-align:center;text-decoration:none;">GO!
Какой прогноз? (Рабочий стол Outlook для Windows, 2007-19? Рабочий стол Outlook для Mac? 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>
Ну, не совсем верно, что вы не можете изменить цвет фона на то, что установлено для границы. Вы действительно можете изменить это, чтобы решить эту адскую проблему в Outlook. Хотя иногда, и этот случай из тех, что "иногда".
Ты используешь background-imageуже, и это действительно путь. Заменитьlinear-gradientс помощью файла.png размером 1x1 пиксель, который точно содержит этот цвет границы, и повторите это. Этот цвет не будет инвертирован - в конце концов, это изображение. Ради совместимости можно попробовать применитьbackground="file here"как атрибут. Он будет повторяться бесконечно, но это именно то, что мы хотим. Однако цвет останется белым, если вы не сделаете всю кнопку отдельным изображением.
Выньте из тега элемент background-color. У вас уже есть
background-image:linear-gradient(#13c2c2, #13c2c2)
и это все, что вам нужно.