Search code examples
htmlcssgmailsignature

Can I able to put style html content on Gmail Signature?

I want put two font color in different mode. In dark mode font is white. In light mode, font is dark blue. So, can saw text when dark mode background is black color.

I have put style on inspect, when changing dark mode and light mode got effect, but save. The style will no save. A sample like below image enter image description here This is my source code

<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"
                          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"
                      >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:60312345678"
                    style="text-decoration: none;" class="letterhead_text_color" target="_blank"
                      >+603 1234 5678</a>
                </td>
              </tr>
              <tr>
                <td class="letterhead_text_color"></td>
                <td><span class="letterhead_text_color" >F：+603 1234 5678</span></td>
              </tr>
              <tr>
                <td style="text-decoration: none;" class="letterhead_text_color" >Jalan Hello World</td>
                <td>E：<a href="mailto:[email protected]" style="text-decoration: none;" class="letterhead_text_color" target="_blank"
                      >[email protected]</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>
Solution

  • I think the short answer is 'no'.

    While GMail now supports quite a large selection of CSS properties it does not support all media queries.

    See https://developers.google.com/gmail/design/reference/supported_css for the current list.

    It supports some media queries but not the light/dark mode queries you want to sense.