Apple Mail深色模式下HTML营销邮件CTA按钮背景与文字颜色不生效问题

最新版iOS 16+/macOS Ventura及以上版本的Apple Mail，默认会对带href属性的a标签做强制深色模式颜色修正，即使你添加了带!important的prefers-color-scheme媒体查询，也会因为客户端内部的样式优先级覆盖规则导致自定义样式失效，可按以下步骤修复：

• 第一步：在HTML的head标签内添加颜色适配声明，主动告知Apple Mail你已自行适配深浅模式，无需客户端强制修正样式

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

• 第二步：修改CSS代码，添加禁止苹果系统自动调整颜色的专属属性，同时覆盖a标签的visited状态样式（Apple Mail会默认修改已访问链接的颜色）
  修改后的完整CSS：

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
  a.nos-button,
  a.nos-button:visited,
  a.nos-button span{
    -apple-color-adjust: none !important;
    background-color: #fff !important;
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
    text-decoration: none !important;
  }
}

@media (prefers-color-scheme: light) {
  a.nos-button,
  a.nos-button:visited,
  a.nos-button span{
    -apple-color-adjust: none !important;
    background-color: #000 !important;
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
  }
}

• 第三步：调整a标签的内联样式，添加-apple-color-adjust: none属性，进一步提升优先级
  修改后的完整HTML代码：

<a href="#" class="nos-button" target="_blank" style="-apple-color-adjust: none;mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#ffffff;font-size:16px;border-style:solid;border-color:#000000;border-width:10px 30px;display:inline-block;background:#000000;border-radius:0px;font-family:'AzoSansWeb', arial, 'helvetica neue', helvetica, sans-serif;font-weight:normal;font-style:normal;line-height:19px;width:auto;text-align:center"><span>COMPRE JÁ</span></a>

• 兜底兼容方案：如果上述修改后仍有异常，可以把CTA按钮的结构改为td套a标签的形式，背景色、边框样式都写在外层td上，a标签仅设置文字样式，避免Apple Mail对a标签的样式覆盖影响整体按钮展示。

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