1

I'm working on creating an html email template. I'm new to developing HTML specifically for email, and I know it can be quite finicky.

I want the background of the email to match the background of the email client(Apple Mail, Gmail, Outlook, etc.) This seems to be the default for plain-text emails. But when creating an HTML email, I find that as soon as I add anything besides text within the <body> tag, the default background color for the email becomes white. The main reason for why I want to achieve this is so that my emails will match light mode and dark mode settings.

How do I make it so the email background will match that of the email client? Is there a way to make the HTML content have no background, or perhaps a transparent background? Or inherit the background color from the email renderer? Or do I need to detect the email client(or dark mode settings?), and change the background-color manually? Any weird work-arounds? And if any of these answers are possible, how is it done?

I know it is at least possible to achieve this within Apple Mail, as I found this example of an email that changes background color to match dark mode vs. light mode:

Example of email matching background color between light and dark mode

Sam Sabin
  • 553
  • 1
  • 6
  • 19
  • Suggest you go and analyze the source code of that example you found then. CSS media queries can of course "detect" dark mode - but you are quite limited in CSS/media query use in emails, in most clients. A "transparent" background, even if possible, would hardly help - you'd still have to specify the text color, to not end up with white text on white background, or vice versa. – CBroe Oct 14 '22 at 05:56
  • @CBroe That’s a really good point about the text. I hadn’t considered that. Also, how could I access the source code of the email? For webpages I can just use “inspect”, but I don’t know how you access it for emails. – Sam Sabin Oct 14 '22 at 06:30
  • 1
    https://www.lifewire.com/view-message-source-os-x-mail-1172799 – CBroe Oct 14 '22 at 06:35

1 Answers1

1

You can use the following, it currently works in 33% of email clients.

@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
}


@media (prefers-color-scheme: light) {
  /* Light theme styles go here */
}

Checkout the following article that goes into more detail.

https://medium.com/swlh/dark-mode-in-html-email-everything-you-need-to-know-57b2647bf304

cam
  • 3,179
  • 1
  • 12
  • 15
  • Thanks you! Hopefully support for this will come to all modern browsers, but for now I think prefers-color-scheme and the work-arounds the author mentions will have to do. Here is the link to the original article, because it looks like the article you linked is a condensed version of the original article: https://sidemail.io/articles/dark-mode-in-html-email/ – Sam Sabin Oct 14 '22 at 07:35