所以我注意到，iOS 上的 Gmail 应用程序在深色模式下修改了我的电子邮件模板的颜色（即黑到白，白到黑）。
不幸的是，我不知道如何避免这种情况。它仅发生在该客户端和操作系统上。例如，Android 上的 Gmail 应用程序可以按预期运行。
是否有一个简单的调整来强制客户仅使用原始颜色（尤其是我遇到此问题的组合）？
iOS 上的 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">
<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>
电子邮件客户端使用多种不同的方法。
Gmail iOS 使用我所说的盲目反转。他们盲目地改变颜色，而不考虑诸如是否已经很暗或可访问性之类的事情。
如您所见，它也不支持媒体查询“prefers-color-scheme”。
幸运的是有黑客。
首先，无论您在何处指定背景颜色或 bgcolor，请使用
background: linear-gradient(#0d0e18, #0d0e18)第二个是文本，它将继续反转，因此是黑底黑字！第二个技巧已完整写在这里 https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/ 但具体细节如下：
添加一些混合模式技巧：
<!-- /* 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>将“暗模式”类添加到您的
<body><body class="darkmode" bgcolor="#0d0e18"><div class="gmail-blend-screen"><div class="gmail-blend-difference">PASSWORD RESET</div></div>或者，在上面的代码和这个代码之间运行差异检查。
<!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>