Gmail签名是否支持插入带明暗模式自适应样式的HTML内容？

效果示例 #

失效原因 #

Gmail签名编辑器默认会剥离独立的<style>标签和全局类样式定义，你通过浏览器Inspect工具临时添加的样式仅属于页面临时修改，不会被写入Gmail的签名存储数据，因此保存后样式就会丢失。另外你代码中针对body的样式规则也不会生效，因为Gmail的邮件内容是嵌套在页面的独立容器中，无权限修改页面根级body属性。

解决方案 #

使用Gmail全端支持的light-dark() CSS颜色函数实现自适应效果，该函数可以直接写在元素的内联style属性中，不会被Gmail的样式过滤规则删除，可自动匹配系统的明暗显示模式切换颜色。

改造步骤如下：

• 移除原有独立<style>标签，所有颜色规则直接写入对应元素的内联style属性
• 在签名代码最开头添加<meta name="color-scheme" content="light dark">声明，告知邮件客户端该内容支持明暗双模式
• 所有需要自适应颜色的元素，用light-dark(浅色模式色值, 深色模式色值)替换原有固定色值：
  • 姓名类文本：light-dark(rgb(96, 96, 96), #ffffff)
  • 普通文本、链接类内容：light-dark(rgb(10, 42, 72), #ffffff)
• 改造完成后打开Gmail签名编辑框，按F12打开开发者工具，找到签名编辑对应的可编辑容器，右键选择「编辑HTML」，将改造后的完整代码粘贴替换原有内容，再点击保存签名即可。

改造后完整代码 #

<meta name="color-scheme" content="light dark">
<table class="letterhead_table">
  <tbody>
    <tr>
      <td style="border-bottom: 1pt solid rgb(193, 152, 108)"><table style="margin-right: 5px;"><tbody>
            <tr>
                <td><span><img
                          src="https://imagesource"
                          width="auto"
                          height="90"
                          style="margin: 0px;
                          margin-right: 5px;
                          object-fit: contain;"
                          tabindex="0" />
                </span></td>
                <td style="text-align: center;"><span><img
                          src="https://imagesource"
                          style="
                            margin: 0px;
                            object-fit: contain;"
                          width="auto"
                          height="20"/></span
                    ><p><span
                      style="
                        color: rgb(193, 152, 108);
                      "
                      >ABCD</span
                    ></p>
                </td>
              </tr>
            </tbody>
        </table></td>
      <td>
        <div style="border-bottom: 1pt solid rgb(193, 152, 108);width: 420px;"><table style="width:inherit">
            <tbody>
              <tr>
                <td style="width: 25%;">
                    <span class="letterhead_name" style="color: light-dark(rgb(96, 96, 96), #ffffff);"
                      >Name</span
                    >
                </td>
                <td style="text-align: right;"><span
                      style="
                        font-size: 11pt;
                        color: rgb(190, 151, 92);"
                      >Company</span
                    >
                </td>
              </tr>
            </tbody>
        </table></div>
        <div><table class="letterhead_table"><tbody>
              <tr>
                <td style="width: 60%;text-decoration: none;color: light-dark(rgb(10, 42, 72), #ffffff);" class="letterhead_text_color" >
                W：<a  style="text-decoration: none;color: light-dark(rgb(10, 42, 72), #ffffff);" href="https://goo.gl/maps/abcd" target="_blank"><span class="letterhead_text_color"></span></a>
                </td>
                <td style="color: light-dark(rgb(10, 42, 72), #ffffff);">T：<a href="tel:60312345678"
                    style="text-decoration: none;color: light-dark(rgb(10, 42, 72), #ffffff);" class="letterhead_text_color" target="_blank"
                      >+603 1234 5678</a>
                </td>
              </tr>
              <tr>
                <td class="letterhead_text_color" style="color: light-dark(rgb(10, 42, 72), #ffffff);"></td>
                <td style="color: light-dark(rgb(10, 42, 72), #ffffff);"><span class="letterhead_text_color" style="color: light-dark(rgb(10, 42, 72), #ffffff);" >F：+603 1234 5678</span>
                </td>
              </tr>
              <tr>
                <td style="text-decoration: none;color: light-dark(rgb(10, 42, 72), #ffffff);" class="letterhead_text_color" >Jalan Hello World</td>
                <td style="color: light-dark(rgb(10, 42, 72), #ffffff);">E：<a href="mailto:info@google.com" style="text-decoration: none;color: light-dark(rgb(10, 42, 72), #ffffff);" class="letterhead_text_color" target="_blank"
                      >info@google.com</a>
                </td>
              </tr>
              <tr>
                <td style="
                          text-decoration: none;color: light-dark(rgb(10, 42, 72), #ffffff);" class="letterhead_text_color" >59000 Kuala Lumpur, Malaysia</td>
                <td style="color: light-dark(rgb(10, 42, 72), #ffffff);">W：<a
                      href="http://www.google.com"
                      target="_blank"
                      style="text-decoration: none;color: light-dark(rgb(10, 42, 72), #ffffff);"
                     class="letterhead_text_color">www.google.com</a>
                </td>
              </tr>
        </tbody></table></div>
      </td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Tan Boon Jun