我正在研究 HTML 电子邮件模板。我一直在为深色模式强制背景颜色和文本颜色属性。我正常的内联 css 是背景颜色：#f2f2f2 和颜色：#191919。但在深色模式下我想要背景颜色：#ff5f00 和颜色：#ffffff。
我能够使用 @media 在 Outlook 中实现相同的目标，但正如在各种博客中所说的使用 gmail 的混合模式一样，我无法实现相同的目标。任何人都可以提供 HTML 模板或 HTML 代码帮助吗？
代码：
<html>
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
body {
font-family: Arial;
background-color: #eee;
color: #111;
}
.Greetings_section {
background-color: #f2f2f2;
padding: 40px 20px;
}
.darkmodecustom {
background-color: #f2f2f2;
color: #191919;
padding: 5px;
}
.bg-orange {
background-color: #FF5F00;
border-color: 1px solid #ff5f00;
}
.button_text {
color: #ffffff;
}
.darkimage {
display: none;
}
a[href] {
color: #ffffff;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #111;
color: #eee;
}
.Greetings_section {
background-color: #f2f2f2;
padding: 20px 10px;
}
.darkmodecustom {
background-color: #f2f2f2;
color: #eee;
padding: 5px;
}
.bg-orange {
background-color: #FF5F00;
border-color: 1px solid #FF5F00;
}
.button_text {
color: #eee;
}
}
[data-ogsc] .body {
background-color: #111;
color: #eee;
}
[data-ogsc] .Greetings_section {
background-color: #f2f2f2;
padding: 40px 20px;
}
[data-ogsc] .darkmodecustom {
background-color: #f2f2f2;
color: white;
padding: 5px;
}
[data-ogsc] .bg-orange {
background-color: #FF5F00;
border-color: 1px solid #ff5f00;
}
[data-ogsc].button_text {
color: #eee;
}
</style>
</head>
<body class="body">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" style="background-color:azure;padding:10px">
<tr>
<td style="padding: 5px;">Dark mode - System (User Agent Styles)</td>
</tr>
<tr>
<td align="center" bgcolor="transparent" style="padding:0px; font-size:0px; line-height:0px;" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding:0; max-width:600px; font-size:0px; line-height:0px; background-color:#ffffff" width="100%">
<tr>
<td align="left" class="mobile-padding Greetings_section" style="padding:0px 24px 20px 24px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="mobile-padding Greetings_section" style=" font-size:0px; line-height:0px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="fs14lh16 darkmodecustom" style="padding:0px 0px 8px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919" valign="top">
<span class="fs14lh16" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, facilis assumenda soluta id ut labore ipsa aliquam reprehenderit</span>
</td>
</tr>
<tr>
<td align="left" style="padding:0px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">•</span>
</td>
<td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
</td>
</tr>
<tr>
<td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">•</span>
</td>
<td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding:16px 0px 0px 0px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="bg-orange" width="auto">
<tr>
<!--[if (gte mso 9)|(IE)]>
<td width="20"> </td>
<![endif]-->
<td align="center" class="h32px fs12lh14 bg-orange" width="144" height="44" style="color:#191919; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; mso-line-height-rule:exactly; line-height:16px; font-weight:600; padding:0" valign="middle">
<a class="fs12lh14 button_text" href="#" style="text-decoration:none; display:block; padding:8px 16px 8px 16px;" target="_blank">Lorem ipsum dolor </a>
</td>
<!--[if (gte mso 9)|(IE)]>
<td width="20"> </td>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
我建议使用
@media (prefers-color-scheme: dark)示例：
@media (prefers-color-scheme: dark) {
.darkmode-bg {
background-color: #ff5f00 !important;
}
.darkmode-color {
color: #ffffff !important;
}
}
如果没有代码来测试，很难回答这个问题，但这就是我的建议。 来源。
还建议在您的
<head><meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
我希望这有帮助！