移动端深色模式下HTML邮件背景颜色设置失效问题求助

首先修正你现有配置的错误：

• meta标签配置错误：你当前设置的content="light dark"等于明确告知邮件客户端兼容深色模式，会触发客户端主动覆写样式，需修改为仅声明支持浅色模式：

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

• 原有媒体查询逻辑错误：你同时设置了白色背景加白色字体，会导致浅色模式下文本完全不可见，且查询语法不规范。

全邮件客户端兼容处理方案 #

• 所有外层容器优先使用行内样式，行内样式优先级远高于客户端默认覆写样式，基础结构示例：

<body style="background-color: #ffffff !important; margin: 0; padding: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">
  <!-- 套一层全局table是HTML邮件的标准兼容写法，避免客户端过滤body样式 -->
  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff !important;">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- 此处放置你的邮件内容 -->
      </td>
    </tr>
  </table>
</body>

• 在<head>标签内添加深色模式覆盖样式，专门处理强制修改样式的客户端：

@media (prefers-color-scheme: dark) {
  body, table, tr, td {
    background-color: #ffffff !important;
  }
  h1, h2, h3, h4, p, span, a, li {
    /* 此处替换为你实际需要的文本颜色，不要写白色 */
    color: #333333 !important;
  }
  /* 禁用系统自动颜色调整 */
  body {
    -apple-color-adjust: none !important;
    color-adjust: exact !important;
    forced-color-adjust: none !important;
  }
}

• 针对会强制覆盖背景色的极端客户端，可以用1px白色背景图兜底，客户端不会修改背景图的展示：
  将body的行内背景样式修改为：

<body style="background: #ffffff url('data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==') repeat top left !important;">

上述base64内容为1*1像素的白色GIF，不会额外增加邮件体积。

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