Outlook等邮件客户端深色模式下HTML邮件背景色异常求助

针对Outlook Windows客户端（Office 365、2021等） #

Outlook Windows采用Word渲染引擎，对标准CSS支持有限，body的背景色设置常被忽略，需结合VML和表格背景强制固定颜色：

1. 在<body>标签内添加VML背景层，同时给body设置inline样式：

<body style="margin:0;padding:0;height:100%;width:100%;background-color:#1D1A1D !important;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%;height:100%;position:absolute;">
  <v:fill type="tile" color="#1D1A1D" />
</v:rect>
<v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="position:absolute;width:100%;height:100%;">
<![endif]-->

2. 将所有内容放入最外层表格，并给表格设置背景色：

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#1D1A1D;">
  <tr>
    <td>
      <!-- 你的邮件内容 -->
    </td>
  </tr>
</table>

3. 在内容表格后关闭VML标签：

<!--[if mso]>
</v:textbox>
<![endif]-->
</body>

针对Gmail iOS 14.2深色模式 #

Gmail iOS会自动转换颜色，需调整meta标签和CSS避免此行为：

1. 修改color-scheme相关meta标签，明确告知客户端使用固定颜色：

<meta name="color-scheme" content="only light">
<meta name="supported-color-schemes" content="only light">

2. 保留深色模式兼容CSS，确保其他客户端正常显示：

@media (prefers-color-scheme: dark) {
  body, .email-container table {
    background-color: #1D1A1D !important;
  }
}

通用调整建议 #

• 移除:root中的Color-scheme和supported-color-schemes设置，避免与meta标签冲突（大小写不一致也会导致识别问题）。
• 确保所有嵌套表格都明确设置background-color:#1D1A1D，部分客户端优先识别表格背景而非body背景。

修改后的核心代码示例 #

<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
    <meta name="color-scheme" content="only light">
    <meta name="supported-color-schemes" content="only light">
    <title></title>
    <style>
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
            background-color: #1D1A1D !important;
        }

        @media (prefers-color-scheme: dark) {
            body, .email-container table {
                background-color: #1D1A1D !important;
            }
        }

        #logo {
            max-width: 120px;
            margin: 3% 0 3% 3%;
            float: left;
        }
        /* 其余原有CSS保持不变 */
    </style>
</head>
<body style="margin:0;padding:0;height:100%;width:100%;background-color:#1D1A1D !important;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%;height:100%;position:absolute;">
  <v:fill type="tile" color="#1D1A1D" />
</v:rect>
<v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="position:absolute;width:100%;height:100%;">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#1D1A1D;" class="email-container">
  <tr>
    <td>
      <!-- 邮件内容 -->
      <img id="logo" src="你的logo地址" alt="Logo">
    </td>
  </tr>
</table>
<!--[if mso]>
</v:textbox>
<![endif]-->
</body>
</html>

内容的提问来源于stack exchange，提问作者Neo