如何通过内联CSS强制暗黑模式遵循自定义颜色设置？

问题说明 #

用HTML+内联CSS制作邮件签名时，需要强制开启暗黑模式的设备遵循自定义颜色（#431407），但在<body>标签添加style="color-scheme: light dark;"后未生效，找不到内联CSS的可行方案。

核心解决方案 #

邮件客户端对color-scheme属性的支持度极低，尤其是内联写法。要避免暗黑模式篡改自定义颜色，最可靠的方式是：

• 给所有文本、边框、背景相关元素明确指定颜色属性，不要依赖样式继承
• 添加forced-colors: none属性阻止系统强制替换颜色
• 若使用背景图，同步设置匹配的background-color兜底，防止客户端反转图片或不加载图片时颜色异常

修改后的完整代码 #

<body style="color-scheme: only light; forced-colors: none;">
  <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;max-width: 703px; padding: 10px;border:1px solid #cccccc;background-color: #替换为背景图对应颜色; background-image: url('https://atendimento.agidesk.com//uploads/1/files/2024/08/196888305212099/fundo_3.png');background-repeat: no-repeat;background-size:100% 100%;word-break: break-word">
    <tr>
      <td width="25%" valign="top" style="padding-left: 10px; align-items: center;">
        <img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/177789489766063/Logo_horizontal_white.png" style="width: 90%;min-width: 100px;display: block; margin-top: 20px;">
        <p style="text-align: center; margin:-5px 0 0;line-height: 1.2; color: #70110a; font-family: sans-serif;">Simples como<br>tem que ser.</p>
      </td>

      <td width="25%" valign="top" style="padding-left: 10px;">
        <img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/53680204017761/Screenshot_1_-_Copia.png" style="width: 100%;min-width: 140px;display: block; border-radius: 50%; border-style: solid; border-width: 5px; border-color: #70110a;">            
      </td>

      <td width="50%" valign="top" style="padding:10px 0 0px 40px">
        <p style="margin:0 0 5px;font-size: 30px;color: #70110a;line-height: 1.2;font-family: sans-serif;"><strong>Rute Cintra</strong></p>

        <p style="margin:15px 0 5px;line-height: 1.2;font-family: sans-serif;color: #ff5f00;font-size: 16px"> 
          <img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/88435035258933/email.png" style="width: 14px;display: inline-block;vertical-align: middle;margin-right: 5px;">
          <strong><a href="mailto:rute.cintra@agidesk.com.br" target="_blank" style="text-decoration: none; color:#ff5f00;">rute.cintra@agidesk.com.br</a></strong>
        </p>
        <p style="margin:10px 0 5px;line-height: 1.2;font-family: sans-serif;font-size: 16px"> 
          <img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/322923827734437/phone.png" style="width: 14px;display: inline-block;vertical-align: middle;margin-right: 5px;">
          <strong><a href="https://wa.me/5582996024017" target="_blank" style="text-decoration: none; color:#ff5f00;">+55 (82) 99602.4017</a></strong>
        </p>

        <p style="margin:15px 0 5px 40px;font-size: 16px;line-height: 1.2;font-family: sans-serif;font-weight: normal;"><strong><a href="https://agidesk.com/" target="_blank" style="text-decoration: none; color: #ad3b3b;">www.agidesk.com</a></strong></p>
      </td>
    </tr>
  </table>
</body>

关键修改点 #

• 将<body>的color-scheme改为only light，同时添加forced-colors: none，明确拒绝系统颜色替换
• 给表格添加background-color（需替换为和背景图匹配的颜色），防止暗黑模式下背景图被反转或不加载时颜色异常
• 确保所有文本、边框、链接的颜色都通过内联style明确指定，无遗漏

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