This content originally appeared on DEV Community and was authored by Sidhant Suvagiya
Developing emails can be a time-consuming process, but with MJML, you can simplify email development. This powerful framework makes it easy to create accessible emails that work across a variety of popular email clients.
If you want to change the appearance of your logo in dark mode, the good news is that MJML offers a simple solution. By applying the following code, you can customise the logo to your liking in dark mode. However, it’s important to keep in mind that prefers-color-scheme have limited email client support. To ensure that your logo is visible in all email clients, it’s a good idea to use a border or shadow for the light version of your logo. With these tips in mind, you’ll be well on your way to creating emails that look great!
If you want to know more about dark mode emails, then Litmus has a great blog on this.
`
<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>
`
This content originally appeared on DEV Community and was authored by Sidhant Suvagiya
Sidhant Suvagiya | Sciencx (2023-04-28T17:26:38+00:00) Change your logo for dark mode in MJML. Retrieved from https://www.scien.cx/2023/04/28/change-your-logo-for-dark-mode-in-mjml/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.