邮件模板字体颜色适配明暗模式求助：Outlook样式异常

1. 处理Outlook桌面版（Windows）的强制颜色反转 #

Outlook桌面版会自动反转背景与文字颜色，常规CSS无法直接覆盖，需通过以下方式解决：

• 用<!--[if mso]>条件注释添加专属样式，指定深色模式下的替代颜色：

<!--[if mso]>
<style>
  .email-section {
    color: #ffffff !important;
    background-color: #1a1a1a !important;
    mso-color-alt: #ffffff;
    mso-background-alt: #1a1a1a;
  }
</style>
<![endif]-->

• 用Base64图片模拟背景色：Outlook不会反转图片颜色，将纯色背景转为1x1的Base64图片作为背景，同时保留常规背景色作为降级：

<td style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='); background-color: #ffffff; mso-background-alt: #1a1a1a;">
  <!-- 邮件内容 -->
</td>

2. 适配Outlook移动端（iOS/Android）深色模式 #

使用系统深色模式媒体查询，在<head>中添加对应样式：

<style>
  @media (prefers-color-scheme: dark) {
    .email-section {
      color: #ffffff !important;
      background-color: #1a1a1a !important;
    }
  }
</style>

确保核心样式同时写为内联样式，作为移动端不支持媒体查询时的降级方案。

3. 禁用自动样式修改的辅助设置 #

在邮件头部添加以下meta标签，部分Outlook版本会尊重这些设置：

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

4. 关键优化细节 #

• 禁止使用透明色：不要将transparent作为背景或文字颜色，明确设置具体色值，避免Outlook自动填充深色背景。
• 内联样式优先：所有核心样式（颜色、背景）必须写为内联样式，Outlook仅保留内联样式与条件注释中的样式。
• 多版本测试：Outlook 2016/2019/365的深色模式行为存在差异，需分别验证效果。

内容的提问来源于stack exchange，提问作者ENERGY.SERVICES