Блог

Главная - Вопросы по программированию - Могу ли я поместить содержимое в стиле html в подпись Gmail?

Могу ли я поместить содержимое в стиле html в подпись Gmail?

#html #css #gmail #signature

#HTML #css #gmail #подпись

Вопрос:

Я хочу поместить два цвета шрифта в другой режим. В темном режиме шрифт белый. В световом режиме шрифт темно-синий. Итак, можно увидеть текст, когда фон темного режима имеет черный цвет.

Я установил стиль для проверки, при смене темного режима и режима освещения получил эффект, но сохранен. Стиль не будет сохранен. Пример, подобный изображению нижевведите описание изображения здесь, это мой исходный код

 <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. После нескольких исследований. Я обнаружил, что единственное решение, доступное в настоящее время, использует черный цвет шрифта. Означает отсутствие стиля цвета шрифта с использованием стиля. Текст черного цвета наследует тело. Когда цветовая схема переходит в темный режим. Цвет фона изменится на черный, цвет шрифта автоматически изменится на белый. Я хочу сделать больше сложности, например, фоновое изображение, динамическое изменение значка, когда цветовая схема меняет свет на темный с помощью @media pefers-color-scheme , поскольку в настоящее время это невозможно.

Ответ №1:

Я думаю, что короткий ответ — «нет».

Хотя GMail теперь поддерживает довольно большой выбор свойств CSS, он не поддерживает все медиа-запросы.

См. https://developers.google.com/gmail/design/reference/supported_css для текущего списка.

Он поддерживает некоторые медиа-запросы, но не запросы в светлом / темном режиме, которые вы хотите распознать.

Метки: