如何解决电子邮件设计深色模式，有没有办法在 gmail ios 中的深色背景上用白色文字颜色书写？
我知道在 gmail ios 中不可能针对暗模式。但我想我会问是否有人解决过这个问题：我有一个黑暗的背景图像。在黑暗模式下，白色文本会恢复为黑色，而在 ios 的 gmail 上，我尝试过的任何内容都不起作用。我什至尝试在图像顶部放置纯色背景，但没有成功。 如果有人找到了可行的破解方法、解决方法和想法，我很乐意听到！ 谢谢！！！
解决方法
According to Litmus Gmail iOS 应用程序应用“完全反转”，这意味着它们甚至不会尝试解析您拥有的内容，而是应用某种全面过滤器来反转所有颜色。
因此，不幸的是，什么都行不通。
,根据@Nathan 的要求...
您可以尝试的一种替代方法是从您的图像中删除任何深色的平面颜色，并将它们设置在内嵌 CSS 中。因此，假设您有一个图像，但是您的文本位于图像上方的背景是纯色。从图像中取出那种平面颜色，而不是制作一个透明的 PNG 并在包装单元格上设置深色，电子邮件客户端将分析文本的背景颜色，然后文本将呈现比背景颜色更亮的颜色。
最初我的客户有一个多层设计，最初我在一个大背景图像中使用木炭和白色块。在测试中 - 众所周知，Gmail 很困难。所以我把木炭拿出来，让那个块透明，然后我在整个块上添加木炭色作为背景色，然后你得到了上面的结果，即使是 Gmail 的粗糙的暗模式优化。
这是改编的 CSS 背景声明：
style="background:#1A1A1A url('https://sendlanehtml.sendlane.com/images/email/Thh8Gtjf88.png') no-repeat top center;
#1A1A1A 是来自原始背景图像的木炭色。这现在是一个 CSS 属性 Gmail 或任何其他电子邮件客户端现在可以用来分析内容并相应地进行优化。
这是我调整背景图片的方式：
- 原木炭/白块
- 改编版去掉了木炭，但保留了原来的空间 填充，保留为透明块。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head>
<base target="_blank">
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="x-ua-compatible">
<!--<![endif]-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse:collapse !important;
mso-table-lspace:0pt!important;
mso-table-rspace:0pt!important;
}
h1,h2,h3,h4,h5,h6,p,a,span,td,strong,li {
font-family:Arial,Helvetica,Verdana,sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F,U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0400-045F,U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103,U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F,U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF,U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F,U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0400-045F,U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103,U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F,U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF,U+FFFD;
}
</style>
<style type="text/css">
html,body { background-color:#ffffff; }
.ReadMsgBody { width:100%; }
.ExternalClass { width:100%; }
* { -webkit-text-size-adjust:none; }
a:link,a:visited { color:#193152; }
.whiteLinks a:link,.whiteLinks a:visited { color:#ffffff!important; }
table,table td {border-collapse:collapse;}
a[href^=tel]{ color:inherit; text-decoration:none; }
@media screen and (max-width: 480px) {
u ~ div { min-width: 100vw !important; }
}
.button,.button2 { transition:0.2s all linear; }
.button:hover { color:#1a1a1a!important; background:#ffffff!important; border-color:#ffffff!important; }
.button2:hover { color:#ffffff!important; background:#1a1a1a!important; border-color:#1a1a1a!important; }
@media only screen and (max-width:600px) {
#footerContainer {
min-width: 100% !important;
width: 100% !important;
}
.responsive .column {
display: block !important;
width: 100% !important;
}
.responsive .columnImage {
height: auto !important;
max-width: 100% !important;
}
#footerContainer .ql-container {
padding-left: 20px !important;
padding-right: 20px !important;
text-align: center !important;
}
.deviceWidth { width:100%!important; padding:0; min-width:100%!important; }
.deviceWidthPadding { width:85%!important; padding:0; min-width:85%!important; }
.background { height:1020px!important; }
}
@media only screen and (max-width:460px) {
.logo { width:180px!important; }
.title { font-size:24px!important; line-height:1.2!important; }
.hero-text-padding { padding:55px 0 0 0!important; }
.background { height:990px!important; }
}
@media only screen and (max-width:360px) {
.title { font-size:22px!important; }
.profile-wrap { width:95px!important; }
.profile { width:80px!important; }
}
</style>
<!--<style type="text/css">
@media (prefers-color-scheme: dark) {
.go-light { color:#ffffff!important; }
.go-dark { color:#1a1a1a!important; }
.go-dark-bg { background-image:none!important; background:none!important; background:#2A2C2E!important; }
}
</style>-->
<title>XXXXXXX</title>
</head>
<body bgcolor="#ffffff" style="margin:0; padding:0;">
<table border="0" cellpadding="0" cellspacing="0" id="top" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="width:600px;">
<tr>
<td class="background go-dark-bg" width="600" height="1070" valign="top" style="background:#1A1A1A url('https://sendlanehtml.sendlane.com/images/email/Thh8Gtjf88.png') no-repeat top center; width:600px; height:1070px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1150px;">
<v:fill type="tile" src="https://sendlanehtml.sendlane.com/images/email/Thh8Gtjf88.png" color="#1A1A1A" />
<v:textbox inset="0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" class="deviceWidthPadding" style="width:480px;">
<tr>
<td class="hero-text-padding go-light go-dark-bg" style="font-family:'Raleway',Arial,sans-serif;font-size:11px;line-height:16px;color:#fffffe;font-weight:600;text-align:center; letter-spacing:2px; padding:55px 20px 0 20px; background-color:#1a1a1a;">
FROM THE BLOG
<p class="title go-light" style="margin:10px 0; font-size:29px; line-height:35px; font-weight:800; letter-spacing:0;"><a href="https://www.sendlane.com/blog-posts/essential-segments-for-your-ecommerce-holiday-marketing?utm_medium=email&utm_source=friday-newsletter&utm_campaign=blog" style="text-decoration:none; color:#fffffe;">7 Essential Segments for Your eCommerce Holiday Marketing in 2020</a></p>
</td>
</tr>
<tr>
<td align="center" class="go-dark-bg" style="padding:20px 0 35px 0;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate !important;">
<tr>
<td align="center">
<!--[if gte mso 9]>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#ff2988" style="padding:5px 15px;" valign="top">
<![endif]-->
<a class="button go-dark" href="https://www.sendlane.com/blog-posts/essential-segments-for-your-ecommerce-holiday-marketing?utm_medium=email&utm_source=friday-newsletter&utm_campaign=blog" target="_blank" style="background-color:#ff2988;border-collapse:separate !important;border-top:15px solid #ff2988;border-right:25px solid #ff2988;border-bottom:15px solid #ff2988;border-left:25px solid #ff2988;color:#fffffe;display:inline-block;font-family:'Raleway',sans-serif;font-size:14px;line-height:19px;text-align:center;font-weight:700;text-decoration:none; border-radius:8px;">Start Segmenting</a>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><a href="https://www.sendlane.com/blog-posts/essential-segments-for-your-ecommerce-holiday-marketing?utm_medium=email&utm_source=friday-newsletter&utm_campaign=blog"><img src="https://sendlanehtml.sendlane.com/images/email/KKZVa1Hmz0.png" width="480" style="display:block; width:480px; max-width:100%;" border="0" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Gmail iOS 应用的试金石：
在这里，您可以看到 Gmail 采用了我们在 HTML/CSS 中定义的内容，并对如何进行暗模式优化做出了更好的判断。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。