An Interest In:
Web News this Week
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
Some of Our Sources
- Techcrunch
- Just Creative
- Pearsonified
- Smashing Magazine
- Smashing Apps
- Six Revisions
- FanExtra - PSD
- Noupe
- Design Modo
- Web Resource Source
Help Webnuz
Referal links:
Change your logo for dark mode in MJML
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, its 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, its a good idea to use a border or shadow for the light version of your logo. With these tips in mind, youll 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>
`
Original Link: https://dev.to/sidhant_suvagiya/change-your-logo-for-dark-mode-in-mjml-104j
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To