Как остановить темный режим во встроенном CSS?
В настоящее время я создаю подпись электронной почты с помощью HTML и встроенного CSS. Но я не знаю, как заставить устройства с темным режимом соблюдать цвета, которые я установил.
И я не нашел в Интернете, как решить эту проблему с помощью встроенного CSS. Кто-нибудь может мне помочь?
Для информации: я установил цвет #431407.
<body style = "color-scheme: light dark;">
<table border = "0" cellpadding = "0" cellspacing = "0" style = "width: 100%;max-width: 703px; padding: 10px;border:1px solid #cccccc;background-image: url('https://atendimento.agidesk.com//uploads/1/files/2024/08/196888305212099/fundo_3.png');background-repeat: no-repeat;background-size:100% 100%;word-break: break-word">
<tr>
<td width = "25%" valign = "top" style = "padding-left: 10px; align-items: center;">
<img src = "https://atendimento.agidesk.com//uploads/1/files/2024/08/177789489766063/Logo_horizontal_white.png" style = "width: 90%;min-width: 100px;display: block; margin-top: 20px;">
<p style = "text-align: center; margin:-5px 0 0;line-height: 1.2; color: #70110a; font-family: sans-serif;">Simples como<br>tem que ser.</p>
</td>
<td width = "25%" valign = "top" style = "padding-left: 10px;">
<img src = "https://atendimento.agidesk.com//uploads/1/files/2024/08/53680204017761/Screenshot_1_-_Copia.png" style = "width: 100%;min-width: 140px;display: block; border-radius: 50%; border-style: solid; border-width: 5px; border-color: #70110a;">
</td>
<td width = "50%" valign = "top" style = "padding:10px 0 0px 40px">
<p style = "margin:0 0 5px;font-size: 30px;color: #70110a;line-height: 1.2;font-family: sans-serif;"><strong>Rute Cintra</strong></p>
<p style = "margin:15px 0 5px;line-height: 1.2;font-family: sans-serif;color: #ff5f00;font-size: 16px">
<img src = "https://atendimento.agidesk.com//uploads/1/files/2024/08/88435035258933/email.png" style = "width: 14px;display: inline-block;vertical-align: middle;margin-right: 5px;">
<strong><a href = "mailto:[email protected]" target = "_blank" style = "text-decoration: none; color:#ff5f00;">[email protected]</a></strong>
</p>
<p style = "margin:10px 0 5px;line-height: 1.2;font-family: sans-serif;font-size: 16px">
<img src = "https://atendimento.agidesk.com//uploads/1/files/2024/08/322923827734437/phone.png" style = "width: 14px;display: inline-block;vertical-align: middle;margin-right: 5px;">
<strong><a href = "https://wa.me/5582996024017" target = "_blank" style = "text-decoration: none; color:#ff5f00;">+55 (82) 99602.4017</a></strong>
</p>
<p style = "margin:15px 0 5px 40px;font-size: 16px;line-height: 1.2;font-family: sans-serif;font-weight: normal;"><strong><a href = "https://agidesk.com/" target = "_blank" style = "text-decoration: none; color: #ad3b3b;">www.agidesk.com</a></strong></p>
</td>
</tr>
</table>
</body>
Я попробовал добавить style="color-scheme: светлый темный;" в теле, но тоже не сработало
Ответы 1
Написание электронных писем в формате HTML/CSS — тонкое искусство.
Из-за огромных различий между механизмами рендеринга почтовых клиентов большинство электронных писем полностью ломаются в зависимости от того, где вы их читаете. Обычно это шокирует, поскольку мы привыкли к тому, что современные браузеры следуют жестким стандартам для обеспечения совместимости функций. Вот отличная штука на ней Майлозавр.
Аналогично Могу ли я использовать? , для проверки совместимости браузера у вас есть Могу ли я написать по электронной почте? для проверки доступности определенных функций для каждого почтового клиента. Вот поиск с результатами по конкретным функциям, которые вы ищете. Внимание, спойлер: ни один из них не поддерживается ни в одной версии Gmail, которая на самом деле является клиентом, на который вы должны ориентироваться из-за размера пользовательской базы.
Я хочу сказать, что если ни одно из других предложений, которые вы найдете здесь (или где-либо еще), не работает, возможно, проверьте, не пытаетесь ли вы использовать неподдерживаемые клиенты, и, возможно, еще раз подумайте, хотите ли вы для начала использовать функцию с такой высокой недоступностью. .
Вкратце, я рекомендую использовать MJML, он пишет идеально перекрестно совместимые электронные письма с простым для изучения синтаксисом. Я не верю, что у него есть поддержка темного режима, которую вы ищете, но опять же, это, вероятно, потому, что с этой функцией сложно работать с точки зрения совместимости.
Я был бы удивлён, если бы вы могли сделать это по электронной почте, поскольку для этого потребуется доступ к
:root. - Developer.mozilla.org/en-US/docs/Web/CSS/color-scheme