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

Viewed 92

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:info@google.com" style="text-decoration: none;" class="letterhead_text_color" target="_blank"
                      >info@google.com</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>
1 Answers
Related