我可以将样式 html 内容放在 Gmail 签名上吗？

Posted 2023-02-19

【中文标题】我可以将样式 html 内容放在 Gmail 签名上吗？

【英文标题】：Can I able to put style html content on Gmail Signature?

【发布时间】：2022-01-09 13:47:36

【问题描述】：

我想把两种字体颜色放在不同的模式下。 在深色模式下，字体为白色。在浅色模式下，字体为深蓝色。 因此，当深色模式背景为黑色时，可以看到文字。

我已经检查了样式，当更改暗模式和亮模式时生效，但保存。样式不会保存。 如下图所示的示例 这是我的源代码

<style>
    @media (prefers-color-scheme: dark) 
      body
          background-color: black;
      
      .letterhead_name,
      .letterhead_text_color,
      table.letterhead_table > tbody > tr > td 
        color: #ffffff;
      
    
    @media screen and (prefers-color-scheme: light) 
      .letterhead_name 
        color: rgb(96, 96, 96);
      
      .letterhead_text_color,
      table.letterhead_table > tbody > tr > td 
        color: rgb(10, 42, 72);
      
    
</style>

<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"
                          
                          
                          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;"
                          
                          /></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"
                      >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;" class="letterhead_text_color" >
                W：<a  style="text-decoration: none;" href="https://goo.gl/maps/abcd" target="_blank"><span class="letterhead_text_color"></span></a>
                </td>
                <td>T：<a href="tel:[phone]"
                    style="text-decoration: none;" class="letterhead_text_color" target="_blank"
                      >[phone]</a>
                </td>
              </tr>
              <tr>
                <td class="letterhead_text_color"></td>
                <td><span class="letterhead_text_color" >F：[phone]</span></td>
              </tr>
              <tr>
                <td style="text-decoration: none;" class="letterhead_text_color" >Jalan Hello World</td>
                <td>E：<a href="mailto:[e-mail]" style="text-decoration: none;" class="letterhead_text_color" target="_blank"
                      >[e-mail]</a>
                </td>
              </tr>
              <tr>
                <td style="
                          text-decoration: none;" class="letterhead_text_color" >59000 Kuala Lumpur, Malaysia</td>
                <td>W：<a
                      href="http://www.google.com"
                      target="_blank"
                      style="text-decoration: none;"
                     class="letterhead_text_color">www.google.com</a>
                </td>
              </tr>
        </tbody></table></div>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

经过一番研究。我发现，目前唯一可用的解决方案是使用黑色字体颜色。使用样式表示没有样式字体颜色。黑色文本是继承正文。当配色方案更改为深色模式时。背景颜色将变为黑色，字体颜色将自动变为白色。我想做更复杂的事情，比如背景图片，当配色方案使用@media pefers-color-scheme将浅色变为深色时动态图标变化，因为目前无法做到。

【参考方案1】：

我认为简短的回答是“不”。

虽然 GMail 现在支持相当多的 CSS 属性选择，但它并不支持所有媒体查询。

查看https://developers.google.com/gmail/design/reference/supported_css 查看当前列表。

它支持一些媒体查询，但不支持您想要感知的明暗模式查询。