Outlook 365 Windows端邮件模板暗色模式媒体查询失效问题

Outlook 365 Windows端采用Word渲染引擎，对prefers-color-scheme媒体查询的样式继承和优先级处理与其他客户端存在差异，导致页脚<p>文本和按钮<a>文本在暗色模式下仍显示黑色。以下是针对性的修复方案：

1. 修改媒体查询规则 #

扩展原有媒体查询，直接指定目标标签的颜色样式，确保覆盖Outlook的默认样式：

@media (prefers-color-scheme: dark) {
     body, center, table {
        background: #2d2d2d!important;
        color: #ffffff!important;
     }
     .darkmode-footer {
        background-color: #7F7CAC!important;
     }
     .darkmode-social {
        background-color: #60C1CB!important;
     }
     /* 强制设置页脚p和a标签的暗色模式颜色 */
     .darkmode-footer p,
     .darkmode-footer a {
        color: #ffffff!important;
        text-decoration: none!important;
     }
     /* 强制设置按钮a标签的暗色模式颜色 */
     .darkmode-btn a {
        color: #ffffff!important;
        background-color: #60C1CB!important;
     }
  }

2. 调整按钮HTML结构 #

给按钮的外层表格添加darkmode-btn类，确保媒体查询能精准定位：

<tr>
    <td align="left" style="padding-left: 10px;">
       <table cellpadding="0" cellspacing="0" border="0" align="left" class="darkmode-btn" style="border-spacing: 0;" role="presentation">
          <tr>
             <td style="border-radius: 10px;" bgcolor="#60C1CB">
                 <a href="*" target="_blank" style="text-decoration: none; color: #ffffff; background-color: #60C1CB; border: 1px solid #60C1CB; border-radius: 10px; padding: 10px 25px; display: inline-block; font-size: 16px; font-weight: bold;">Lorum</a>
             </td>
          </tr>
       </table>
    </td>
 </tr>

修复原理 #

• Word渲染引擎对CSS继承支持有限，必须直接指定<p>、<a>等标签的样式，无法依赖父元素的颜色继承。
• 使用!important提升样式优先级，覆盖Outlook自带的链接和文本默认样式。
• 通过类选择器结合标签选择器，确保样式能精准作用到目标元素。

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