电子邮件设计深色模式，有没有办法在gmail ios中在深色背景上用白色文字颜色书写？

问题描述 投票：0回答：2

我知道在 gmail ios 中不可能定位深色模式。但我想我应该问是否有人解决过这个问题：我的背景图像很暗。在深色模式下，白色文本会恢复为黑色，而在 iOS 版 Gmail 上，我尝试的任何方法都不起作用。我什至尝试在图像上放置纯色背景色，但没有成功。 如果有人找到了可行的黑客、解决方法、想法，我很想听听！ 谢谢！！！

html css gmail html-email darkmode
2个回答
2
投票

根据@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 或任何其他电子邮件客户端现在可以使用它来分析内容并进行相应优化。

这是我调整背景图片的方法：

  1. 原装木炭/白块
  2. 经过改编的版本，去掉了木炭，但仍保留了原来的空间 填充，保留为透明块。

代码：

<!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+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, 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+0490-0491, U+04B0-04B1, 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+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: 700;
          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: 700;
          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: 800;
          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: 800;
          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: 800;
          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: 800;
          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: 800;
          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;
        }
    </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,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', Helvetica, 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', Helvetica, Arial, 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 应用程序的 Litmus 测试：

在这里您可以看到 Gmail 采用了我们在 HTML/CSS 中定义的内容，并对如何进行暗模式优化做出了更好的判断。

2
投票

根据 Litmus ，Gmail iOS 应用程序应用“完全反转”，这意味着它们甚至不会尝试解析您所拥有的内容，而是应用某种全面过滤器来反转所有颜色。

但是，已经开发了一种可以工作的 hack https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.