更改MJML中的徽标以进行黑暗模式
#html #email #mjml #emaildeveloper

开发电子邮件可能是一个耗时的过程，但是使用MJML，您可以简化电子邮件开发。这个功能强大的框架使创建可访问的电子邮件可以轻松访问各种流行的电子邮件客户端。

如果您想在黑暗模式下更改徽标的外观，那么好消息是MJML提供了一个简单的解决方案。通过应用以下代码，您可以将徽标自定义为您的喜好。但是，重要的是要记住，偏爱颜色的颜色的电子邮件客户端支持有限。为了确保您的徽标在所有电子邮件客户端中都可以看到，最好为徽标的轻版本使用边框或阴影。考虑到这些技巧，您将在创建看起来很棒的电子邮件的过程中会很好！

如果您想了解有关黑模式电子邮件的更多信息，那么Litmus就有一个很棒的博客。

`

<mj-raw>
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
</mj-raw>

<mj-style>

  /* Dark Mode Style For Apple Mail and iOS */

  :root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
  }

  @media (prefers-color-scheme: dark) {

  .darkmode{
  background-color:#20272D!important;
  }

  .light_img{
  display:none!important;
  }

  .dark_img{
  display:block!important;
  }

  }

</mj-style>

<mj-section>
  <mj-column>
    <mj-text>

      <a href="http://litmus.com/" target="_blank">

        <div class="light_img" align="center">
          <img width="163" height="60" border="0" style="margin:0 auto; padding:0;" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" alt="Litmus" />
        </div>

        <!-- The following Dark Mode logo image is hidden 
          with MSO conditional code and inline CSS, but will be         
          revealed once Dark Mode is triggered -->

        <!--[if !mso]><!-->
        <div class="dark_img" style="display:none; overflow:hidden;" align="center">
          <img width="163" height="60" border="0" style="margin:0 auto; padding:0;" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" alt="Litmus" />
        </div>
        <!--<![endif]-->

      </a>

    </mj-text>
  </mj-column>
</mj-section>