Known Participant

Question

Html e-mail for dark mode

18 replies
3320 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

BenPleysier

Community Expert

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.

Translate

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

T

Thierry5E43Author

Known Participant

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

Translate

B

Ben M

Community Expert

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

Translate

Nancy OShea

Community Expert

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/

Translate

Nancy O'Shea— Product User & Community Expert

T

Thierry5E43Author

Known Participant

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.

Translate

B

Ben M

Community Expert

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.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.