So I noticed, that Gmail App on iOS amends the colors of my email template when in dark mode (i.e. black to white, white to black).
Unfortunately, I have no idea how to avoid this. It happens only on this client and os. Gmail App on Android for example works as intended.
Is there an easy tweak to force clients to only work with original colors (especially this combination where I have this issue)?
meta tags seem to be ignored by Gmail on iOS. media is already in use. so prefers color scheme wont work.
<!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">
<head>
<title>Password reset</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<style type="text/css">
#outlook a {padding: 0;}
/* hotmail background + line height fixes */
.ExternalClass {width: 100% !important;}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,
/* image borders + formatting */
img {outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;}
a img {border: none; text-decoration: none;}
/* re-style iPhone automatic links */
.appleLinksGrey a {color: #919191 !important;text-decoration: none !important;}
body {padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; font-family: 'open sans', sans-serif;}
/* button */
.textbutton a { font-family:'Open sans', Gotham-Bold,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; !important;display: block !important;padding:0px 10px !important;text-decoration: none !important; }
@media screen and (max-width:640px) {
.full { width: 100% !important; height: auto !important;}
.inner { width: 90% !important; height: auto !important;}
.column { padding: 5px !important; }
}
</style>
</head>
<body bgcolor="#0d0e18">
<center style="background-color: #0d0e18; padding: 10px;">
<span style="display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; width:0 !important; max-height: 0px !important; overflow: hidden !important;">To reset your password, please follow the instructions in this email</span>
<span style="display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; width:0 !important; max-height: 0px !important; overflow: hidden !important;">͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </span>
<table class="full" bgcolor="#0d0e18" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 30px 0 0;">
<table class="inner" width="600" style="max-width: 600px; min-width: 300px;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="column full">
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href="#"><img style="width: 80%; display:block; line-height:0px; font-size:0px; border:0px;" src="https://dummyimage.com/200x80" alt="logo" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="full" bgcolor="#0d0e18" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 20px 0;">
<table class="inner" width="600" style="max-width: 600px; min-width: 300px;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="580" bgcolor="#161823" style="border:1px solid #23273d; border-radius:10px; border-bottom:2px solid #23273d; padding: 20px 0 20px;" align="center">
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:0px;"><a href="#"><img src="https://dummyimage.com/550x250" alt="image" width="100%" style="display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" /></a></td>
</tr>
<tr>
<td align="center" style="font-family:'Open sans', Gotham-Bold,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:24px; color:#ffffff;font-weight:bold; padding: 35px 0 15px;">PASSWORD RESET</td>
</tr>
<tr>
<td align="left" style="padding: 5px; font-family:Open sans, Gotham-Book,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:16px; color:#ffffff;line-height:25px;">Hello {{login}},<br>We have received a request from you to reset your password. To reset your password, please click on the button below.<br><br></td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellpadding="0" cellspacing="0" class="textbutton">
<tr>
<td height="40" align="center" bgcolor="#41cef7" style="font-family:'Open sans', Gotham-Bold,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:16px; color:#FFFFFF; padding: 0 20px; border-radius: 10px;"><a href="{$restore_url}" style="text-decoration: none; color: #FFFFFF; font-weight: bold;">RESET NOW</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="full" width="100%" align="center" bgcolor="#0d0e18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#0d0e18" style="padding: 15px 0;">
<table class="inner" width="600" style="max-width: 600px; min-width: 300px;" border="0" align="center" cellpadding="0" cellspacing="0">
<td class="column full" align="center">
<table class="full" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-family:Open sans, Gotham-Book,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:13px; color:#ffffff;line-height:28px; ">2024 © All rights reserved</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
There are various different approaches that email clients use.
Gmail iOS use what I call a blind invert. They change the colours blindly without consideration of things like whether it's already dark, or accessibility.
As you've seen, it also does not support the media query 'prefers-color-scheme'.
Fortunately there are hacks.
First is wherever you specify a background-color, or bgcolor, use background: linear-gradient(#0d0e18, #0d0e18). The color there should be the same as the background color. That will keep it the same.
Second is the text, which will continue to get inverted and so be black on black! Hack number two is written up in full here https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/ but the nuts and bolts are as follows:
Add some blend mode trickery:
<!-- /* GMAIL IOS KEEP WHITE TEXT */ -->
<style type="text/css">
u + .darkmode .gmail-blend-screen { background:#000; mix-blend-mode:screen; }
u + .darkmode .gmail-blend-difference { background:#000; mix-blend-mode:difference; }
</style>
Add a class 'darkmode' to your <body>:
<body class="darkmode" bgcolor="#0d0e18">
<div class="gmail-blend-screen"><div class="gmail-blend-difference">PASSWORD RESET</div></div>
Alternatively, run a diff check between your code as above and this.
<!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">
<head>
<title>Password reset</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<style type="text/css">
#outlook a {padding: 0;}
/* hotmail background + line height fixes */
.ExternalClass {width: 100% !important;}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,
/* image borders + formatting */
img {outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;}
a img {border: none; text-decoration: none;}
/* re-style iPhone automatic links */
.appleLinksGrey a {color: #919191 !important;text-decoration: none !important;}
body {padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; font-family: 'open sans', sans-serif;}
/* button */
.textbutton a { font-family:'Open sans', Gotham-Bold,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; !important;display: block !important;padding:0px 10px !important;text-decoration: none !important; }
@media screen and (max-width:640px) {
.full { width: 100% !important; height: auto !important;}
.inner { width: 90% !important; height: auto !important;}
.column { padding: 5px !important; }
}
</style>
<!-- /* GMAIL IOS KEEP WHITE TEXT */ -->
<style type="text/css">
u + .darkmode .gmail-blend-screen { background:#000; mix-blend-mode:screen; }
u + .darkmode .gmail-blend-difference { background:#000; mix-blend-mode:difference; }
</style>
</head>
<body class="darkmode" bgcolor="#0d0e18">
<center style="background: linear-gradient(#0d0e18, #0d0e18);background-color: #0d0e18; padding: 10px;">
<span style="display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; width:0 !important; max-height: 0px !important; overflow: hidden !important;">To reset your password, please follow the instructions in this email</span>
<span style="display:none !important; visibility:hidden !important; opacity:0 !important; height:0 !important; width:0 !important; max-height: 0px !important; overflow: hidden !important;">͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </span>
<table class="full" bgcolor="#0d0e18" align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="background: linear-gradient(#0d0e18, #0d0e18);">
<tr>
<td align="center" style="padding: 30px 0 0;">
<table class="inner" width="600" style="max-width: 600px; min-width: 300px;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="column full">
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href="#"><img style="width: 80%; display:block; line-height:0px; font-size:0px; border:0px;" src="https://dummyimage.com/200x80" alt="logo" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="full" bgcolor="#0d0e18" align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="background: linear-gradient(#0d0e18, #0d0e18);">
<tr>
<td align="center" style="padding: 20px 0;">
<table class="inner" width="600" style="max-width: 600px; min-width: 300px;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="580" bgcolor="#161823" style="border:1px solid #23273d; border-radius:10px; border-bottom:2px solid #23273d; padding: 20px 0 20px;background: linear-gradient(#161823, #161823);" align="center">
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:0px;"><a href="#"><img src="https://dummyimage.com/550x250" alt="image" width="100%" style="display:block; line-height:0px; font-size:0px; border:0px; width: 100%;" /></a></td>
</tr>
<tr>
<td align="center" style="font-family:'Open sans', Gotham-Bold,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:24px; color:#ffffff;font-weight:bold; padding: 35px 0 15px;"><div class="gmail-blend-screen">
<div class="gmail-blend-difference">PASSWORD RESET</div></div></td>
</tr>
<tr>
<td align="left" style="padding: 5px; font-family:Open sans, Gotham-Book,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:16px; color:#ffffff;line-height:25px;"><div class="gmail-blend-screen">
<div class="gmail-blend-difference">Hello {{login}},<br>We have received a request from you to reset your password. To reset your password, please click on the button below.<br><br></div></div></td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellpadding="0" cellspacing="0" class="textbutton">
<tr>
<td height="40" align="center" bgcolor="#41cef7" style="font-family:'Open sans', Gotham-Bold,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:16px; color:#FFFFFF; padding: 0 20px; border-radius: 10px;background: linear-gradient(#41cef7, #41cef7);"><div class="gmail-blend-screen">
<div class="gmail-blend-difference"><a href="{$restore_url}" style="text-decoration: none; color: #FFFFFF; font-weight: bold;">RESET NOW</a></div></div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="full" width="100%" align="center" bgcolor="#0d0e18" border="0" cellspacing="0" cellpadding="0" style="background: linear-gradient(#0d0e18, #0d0e18);">
<tr>
<td align="center" bgcolor="#0d0e18" style="padding: 15px 0;background: linear-gradient(#0d0e18, #0d0e18);">
<table class="inner" width="600" style="max-width: 600px; min-width: 300px;" border="0" align="center" cellpadding="0" cellspacing="0">
<td class="column full" align="center">
<table class="full" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-family:Open sans, Gotham-Book,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:13px; color:#ffffff;line-height:28px; "><div class="gmail-blend-screen">
<div class="gmail-blend-difference">2024 © All rights reserved</div></div></td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>