Skip to main content
Known Participant
January 20, 2021
Question

Html e-mail for dark mode

  • January 20, 2021
  • 2 replies
  • 3230 views

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

    This topic has been closed for replies.

    2 replies

    BenPleysier
    Community Expert
    Community Expert
    January 20, 2021

    Have a look at https://www.campaignmonitor.com/blog/email-marketing/2019/10/designing-an-email-for-dark-mode-dark-and-light-optimization/ 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!
    Known Participant
    January 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 

    Community Expert
    January 21, 2021

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

    Nancy OShea
    Community Expert
    Community Expert
    January 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
    Known Participant
    January 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.

    Community Expert
    January 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.