Html e-mail for dark mode

Report · Jan 20, 2021

Hi,

I am trying to create HTML e-mails, but I run into the problem that it will not look the same on dark mode e-mail clients. I tried the prefer-color-scheme css class without success. I also tried DW's e-mail templates, but the color reverses when I send an email to a dark mode platform.

Every day I receive marketing e-mails with black fonts and white backgrounds, so I know it can be done. (I use dark mode) Any idea how to do this? Honestly If I could get a template it would save me a lot of trouble.

Thanks

Report · Jan 20, 2021

Sorry, I don't know what you mean. Can you show us some screenshots?

Your user interface should have no effect either way on how the e-mail looks. Most likely your e-mail client doesn't support your code. Or perhaps your code contains critical errors. Use the online validation service below:

I use MailChimp's e-mail templates. They have been industry tested to perform well on all major e-mail clients, except the problem ones like Outlook.

https://mailchimp.com/help/types-of-templates/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 21, 2021

So the company's logo is dark on a white background. So when I create the HTML e-mail, on a dark mode it looks like this. I can't figure out how to force a white background in my code.

When I use a word press plugin like Mailster, I can receive an email with a white background in my dark mode email client (Apple Mail). I just want to be able to create my own html email that would replicate what Mailchimp, Mailster, Litmus, etc... does.

I also already read BenPleysier's link before, but I don't have the authorization to change the company's logo's look.

Report · Jan 21, 2021

You just need to set the background color to white all the time. CSS support for email is sporadic at best so if your logo is dark and needs a white background you have to state that this cell/div/etc is always white for the background color, unless things that are transparent become inverted and images will unfortunately just become unreadable if they have a transparent background.

Report · Jan 21, 2021

It sounds to me like you might be setting your email html up incorrectly. You should use inline css to style your elements as some email clients, I believe Google, still strip the css from the head section of your email html, so possibly that is what is happening and as a result you are losing the presentation.

Email html is quite a skill, given the many quirks of email clients, so it might be simpler if you were to find a ready made template which has been tested in the most popular email clients.

Report · Jan 20, 2021

Have a look at https://www.campaignmonitor.com/blog/email-marketing/2019/10/designing-an-email-for-dark-mode-dark-a... or search for the subject using a search engine that does not stifle free speach.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jan 21, 2021

I did that, Ben, I already read all the articles before posting here. It just doesn't work for me...

I also read this article :

https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/

and tried their css without success

Thanks

Report · Jan 21, 2021

Can you post the HTML code online for us to view in a browser and see what you have?

Report · Jan 28, 2021

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.blink {
    animation: blink-animation 2s steps(5, start) infinite;
    -webkit-animation: blink-animation 2s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
.rotation {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
</style>
</head>
<body  style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 32px" >
<div class="container-fluid pt-4 bg-white">
  <div class="entete">
    <img src="http://lacbr.tv/images/JeLou-CA-2.png"  alt="logo tournée Jé & Lou consignaction" style="width: 30vw; float: right" />
    <h2 style= "color :#039844; font-size: 30px;">
      JÉ &amp; LOU <span style="color:#2E348E">vous offrent leurs</span>
    </h2>
    <h1 style="color:#2E348E; font-size: 92px;">
      Félici<span style="color: #F0115A; font-weight: 200">ta</span><strong style="color: #F0115A">tions&nbsp;!</strong>
    </h1>
    <p style="color:#2E348E ">
      Vous recevrez notre visite
    </p>
    <!-- CHANGER LA DATE ICI -->
    <div>
      <p style="color: #F10C5A;" class="blink">
        le 11 novembre 2020
      </p>
    </div>
  </div>
  <!-- END entete -->
  <p style="border-bottom:#039844 solid">
  </p>
  <p style="color:#2E348E; ">
    <strong>Félici</strong><span style="color: #F0115A; font-weight: 200">ta</span><strong style="color: #F0115A">tions,</strong><strong> votre école a remporté</strong> le concours de La <strong>Mission</strong>
    <strong style="color: #039844"> verte</strong> de <strong style="color: black">consign</strong><span style="color: black">action </span> des Aventuriers <strong style="color: #039844">Jé &amp; Lou.</strong>
  </p>
  <div style="background-color: #F10E5A">
    <p style="color: white; text-align: center">
      <br>
      Cliquez sur le lien afin de finaliser votre réservation <br>
      <br>
    </p>
    <div class="display-inline text-center" style="color: white; text-align: center">
      <img src="http://lacbr.tv/images/fleche.png" width="90" height="90" style="margin-right: 50px" alt=""/>
      <a href="#" target="_blank" style="color: #ffffff; text-decoration: none">
        <img src="http://lacbr.tv/images/thumb.png" width="104" height="102" class="mr-5" alt=""/>
      </a>
      <img src="http://lacbr.tv/images/fleche.png" width="90" height="90" style="margin-left: 50px" class="rotation" alt=""/>
    </div>
    <br>
    <p style="color: white; text-align: center">
      Consultez la documentation utile avant votre venue.
    </p>
    <br>
  </div>
  <br>
  <p style="border-bottom: #000000 solid thick">
  </p>
  
  <!-- Icones CBR Consignaction -->
  
  <a href="http://lacbr.tv" target="_blank">
    <img src="http://lacbr.tv/images/LOGO_CBR_noBgr-removebg-preview.png"  alt="logo cbr"  style="width:23%"/>
  </a>
  <img src="http://lacbr.tv/images/ill_but_ballon_noir_CBR.png" width="325" alt="but et ballon"  style="width:23%"/>
  <img src="http://lacbr.tv/images/ic_tv_vert_crop.png" width="90" class="ml-5" alt="télé"  style="width:10%; margin-right:10%"/>
  <a href="https://consignaction.ca" target="_blank">
    <img src="http://lacbr.tv/images/logo_CA_Noir_Vert_crop.png" width="350" alt="logo consignaction" style="width:23%"/>
  </a>
</div>
<br>
<br>
<footer style="font-size: 24px; color: gray; text-align: center" class="pb-2"> Support | Voir le courriel dans votre navigateur | Se désabonner | Politique de confidentialité <br>
  ©2020 | LaCBR.tv inc. tous droits réservés. </footer>
</body>
</html>

Report · Jan 28, 2021

I'm seeing references to styles that don't exist in <style> tags of the code you've provided...

Those classes can't do anything without being referenced in the <head> or a link to the external sheet you're using. Both are very, very bad ideas in html email due to certain email clients stripping the <head> out or blocking external references.

You need to add a background-color with css, or the old html attribute "bgcolor" to the <div>...

<div bgcolor="white">
<div style="background-color:white;">

Report · Jan 28, 2021

.blink {
    animation: blink-animation 2s steps(5, start) infinite;
    -webkit-animation: blink-animation 2s steps(5, start) infinite;
}

Yikes, the dreaded blink!!! I guess we should be grateful that most people who use Outlook, Gmail, Yahoo and other web mail systems will never see it because CSS animations are not supported. Phew!

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 28, 2021

I will check this out. and yes I thought I removed all the bootstrap classes. I know they do not work. Too bad for the blink!

Thanks a lot for your help!

Report · Jan 28, 2021

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jé &amp; Lou - La tournée consignaction</title>

</head>
<body  style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 32px" >
<div style="background-color: #F2F2F2">
  <div>
    <img src="http://lacbr.tv/images/JeLou-CA-2.png"  alt="logo tournée Jé & Lou consignaction" style="width: 30vw; float: right" />
    <h2 style= "color :#039844; font-size: 30px;">
      JÉ &amp; LOU <span style="color:#2E348E">vous offrent leurs</span>
    </h2>
    <h1 style="color:#2E348E; font-size: 92px;">
      Félici<span style="color: #F0115A; font-weight: 200">ta</span><strong style="color: #F0115A">tions&nbsp;!</strong>
    </h1>
    <p style="color:#2E348E ">
      Vous recevrez notre visite
    </p>
    <!-- CHANGER LA DATE ICI -->
    <div>
      <p style="color: #F10C5A;">
        le 11 novembre 2020
      </p>
    </div>
  </div>
  <!-- END entete -->
  <p style="border-bottom:#039844 solid">
  </p>
  <p style="color:#2E348E; ">
    <strong>Félici</strong><span style="color: #F0115A; font-weight: 200">ta</span><strong style="color: #F0115A">tions,</strong><strong> votre école a remporté</strong> le concours de La <strong>Mission</strong>
    <strong style="color: #039844"> verte</strong> de <strong style="color: black">consign</strong><span style="color: black">action </span> des Aventuriers <strong style="color: #039844">Jé &amp; Lou.</strong>
  </p>
  <div style="background-color: #F10E5A">
    <p style="color: white; text-align: center">
      <br>
      Cliquez sur le lien afin de finaliser votre réservation <br>
      <br>
    </p>
    <div style="color: white; text-align: center">
      <img src="http://lacbr.tv/images/Fleche_90.png" width="90" height="90" style="margin-right: 50px" alt="flèche"/>
      <a href="#" target="_blank" style="color: #ffffff; text-decoration: none">
        <img src="http://lacbr.tv/images/thumb.png" width="104" height="102" alt=""/>
      </a>
      <img src="http://lacbr.tv/images/Fleche_90_gc.png" width="90" height="90" style="margin-left: 50px" alt="flèche"/>
    </div>
    <br>
    <p style="color: white; text-align: center">
      Consultez la documentation utile avant votre venue.
    </p>
    <br>
  </div>
  <br>
  <p style="border-bottom: #000000 solid thick">
  </p>
  
  <!-- Icones CBR Consignaction -->
  
  <a href="http://lacbr.tv" target="_blank">
    <img src="http://lacbr.tv/images/LOGO_CBR_noBgr-removebg-preview.png" alt="logo cbr" style="width:23%"/>
  </a>
  <img src="http://lacbr.tv/images/ill_but_ballon_noir_CBR.png" alt="but et ballon" style="width:23%"/>
  <img src="http://lacbr.tv/images/ic_tv_vert_crop.png"  alt="télé" style="width:10%; margin-right:10%"/>
  <a href="https://consignaction.ca" target="_blank">
    <img src="http://lacbr.tv/images/logo_CA_Noir_Vert_crop.png" alt="logo consignaction" style="width:23%"/>
  </a>
</div>
<br>
<br>
<footer style="font-size: 24px; color: gray; text-align: center" > Support | Voir le courriel dans votre navigateur | Se désabonner | Politique de confidentialité <br>
  ©2020 | LaCBR.tv inc. tous droits réservés. </footer>
</body>
</html>

Report · Jan 28, 2021

Up there is the corrected html. Still have the same issue.

Report · Jan 28, 2021

Take us through your steps.

Which operating system do you have?
What exactly are you doing to make your screen go into Dark Mode?
Which e-mail client are you using?

I'll try to reproduce it at my end if I can. But if I can't, I won't be able to help you because your problem is too specific to your system.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 28, 2021

Take us through your steps.

Which operating system do you have? Mac OSX Catalina - Dark mode enabled on Mac OS
What exactly are you doing to make your screen go into Dark Mode? System preference -> General -> Appearance : Dark Mode
Which e-mail client are you using? Apple Mail

But I sent this mail to a friend who uses Windows Mail in dark mode, same thing happens, like the screenshot I made previously.

Report · Jan 28, 2021

I don't know if this will work for you or not but give it a try.

NOTE: I removed all the <style> tags from your <head>. They don't belong in email.

I added an emphatic background and color to your <body> tag. Hopefully it will override whatever styles your OS is applying.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body  style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 32px; background-color: #FFFFFF !important; color: #000000 !important;">
<div class="container-fluid pt-4 bg-white">
<div class="entete">
<img src="http://lacbr.tv/images/JeLou-CA-2.png"  alt="logo tournée Jé & Lou consignaction" style="width: 30vw; float: right" />
<h2 style= "color :#039844; font-size: 30px;"> JÉ
&amp; 
LOU <span style="color:#2E348E">vous offrent leurs</span>
</h2>
<h1 style="color:#2E348E; font-size: 92px;"> Félici<span style="color: #F0115A; font-weight: 200">ta</span><strong style="color: #F0115A">tions
&nbsp;
!</strong>
</h1>
<p style="color:#2E348E "> Vous recevrez notre visite </p>
<!-- CHANGER LA DATE ICI -->
<div>
<p style="color: #F10C5A;" class="blink"> le 11 novembre 2020 </p>
</div>
</div>
<!-- END entete -->
<p style="border-bottom:#039844 solid">
</p>
<p style="color:#2E348E; ">
<strong>Félici</strong><span style="color: #F0115A; font-weight: 200">ta</span><strong style="color: #F0115A">tions,</strong><strong> votre école a remporté</strong> le concours de La <strong>Mission</strong>
<strong style="color: #039844"> verte</strong> de <strong style="color: black">consign</strong><span style="color: black">action </span> des Aventuriers <strong style="color: #039844">Jé
&amp; 
Lou.</strong>
</p>
<div style="background-color: #F10E5A">
<p style="color: white; text-align: center">
<br>
Cliquez sur le lien afin de finaliser votre réservation <br>
<br>
</p>
<div class="display-inline text-center" style="color: white; text-align: center">
<img src="http://lacbr.tv/images/fleche.png" width="90" height="90" style="margin-right: 50px" alt=""/>
<a href="#" target="_blank" style="color: #ffffff; text-decoration: none">
<img src="http://lacbr.tv/images/thumb.png" width="104" height="102" class="mr-5" alt=""/>
</a>
<img src="http://lacbr.tv/images/fleche.png" width="90" height="90" style="margin-left: 50px" class="rotation" alt=""/>
</div>
<br>
<p style="color: white; text-align: center"> Consultez la documentation utile avant votre venue. </p>
<br>
</div>
<br>
<p style="border-bottom: #000000 solid thick">
</p>

<!-- Icones CBR Consignaction -->

<a href="http://lacbr.tv" target="_blank">
<img src="http://lacbr.tv/images/LOGO_CBR_noBgr-removebg-preview.png"  alt="logo cbr"  style="width:23%"/>
</a>
<img src="http://lacbr.tv/images/ill_but_ballon_noir_CBR.png" width="325" alt="but et ballon"  style="width:23%"/>
<img src="http://lacbr.tv/images/ic_tv_vert_crop.png" width="90" class="ml-5" alt="télé"  style="width:10%; margin-right:10%"/>
<a href="https://consignaction.ca" target="_blank">
<img src="http://lacbr.tv/images/logo_CA_Noir_Vert_crop.png" width="350" alt="logo consignaction" style="width:23%"/>
</a>
</div>
<br>
<br>
<footer style="font-size: 24px; color: gray; text-align: center" class="pb-2"> Support | Voir le courriel dans votre navigateur | Se désabonner | Politique de confidentialité <br>
©2020 | LaCBR.tv inc. tous droits réservés. </footer>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 29, 2021

Thanks for trying. Still doesn't work. Same look as the images I posted earlier on dark mode emails. I also opened the e-mail in Outlook.com and the problem is the same.

I'll redesign my e-mails so they both look good with regular colors and reverse colors. I don't see any other solution.

Thanks for you help

Report · Jan 29, 2021

You could try going full-on old-school and place a 1 pixel, white image in the background.

That would repeat horizontally and vertically, covering the entire space with "an image" that the Mac shouldn't be able to invert (if it "sees" background-images anyway).