pitzki
Reputation: 175
Email design dark mode, is there a way to write with white text color on a dark background in gmail ios?
I know that it is impossible to target dark mode in gmail ios. But I thought I'd ask if anyone ever solved this problem: I have a background image that is dark. The white text reverts to black during dark mode, and on gmail for ios, nothing I tried worked. I even tried putting a solid background color on top of the image but it didn't take. If anyone ever found a hack, workaround, idea that worked I'd love to hear it! Thanks!!!
Upvotes: 1
Views: 9588
Answers (2)
Nathan
Reputation: 5204
According to Litmus the Gmail iOS app applies a 'full invert', meaning that they don't even attempt to parse what you have but apply some sort of blanket filter to invert all colours.
However, there is a hack been developed which can work https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/.
Upvotes: 2
user2958788
Reputation:
As per @Nathan's request...
One alternative you can try is to remove any dark flat colours from your image and instead set them in the inline CSS. So say you have an image, but where your text lies over the image the background is a flat colour. Taking that flat colour out of the image and instead making a transparent PNG and setting the dark colour on the wrapping cell, email clients will then analyse the background colour against the text and then the text will render lighter than the background colour.
Originally my client had a multi layered design where initially I had the charcoal and white blocks in one large bg image. In testing - Gmail was difficult, as we all know. So I took the charcoal out and made that block transparent, I then added the charcoal colour as a background colour on the entire block and then you get the result above, even with Gmail's crude dark mode optimisation.
Here is the adapted CSS background declaration:
style="background:#1A1A1A url('https://sendlanehtml.sendlane.com/images/email/Thh8Gtjf88.png') no-repeat top center;
The #1A1A1A is the charcoal colour from the original background image. This now being a CSS property Gmail or any other email client can now use to analyse the content and optimise accordingly.
Here is how I adapted my background image:
- original with charcoal / white blocks
- adapted version with the charcoal removed yet the space it used to fill, being preserved as a transparent block.
Code:
<!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>Litmus test of Gmail iOS app:
Here you can see Gmail taking what we've defined in HTML/CSS and making a better judgement call on how to proceed for dark mode optimisation.
Upvotes: 3
Related Questions
- HTML email background color is not displayed in Gmail/mobile/iOS/dark mode
- Font Color in HTML Email - Gmail
- How to prevent iOS 13 Dark Mode from breaking emails
- How do I match the background color of my HTML email to the background color of the email client?
- Change background colour for html emails in dark mode on mobile phoner
- Controlling color swaps in Gmail in dark mode
- HTML email Dark Mode iOS and Gmail
- How can I remove Gmail App Dark Mode stylings?
- HTML Mails in Dark Mode
- gmail html email background color