Search code examples
htmlcsshtml-emailmode

background-image support for HTML Emails with dark mode

This question is in regards to a HTML Email Notification dark or light mode.

I'm having trouble with getting background-image to work properly for a css class to display either a white logo or a black logo depending on the mode preferences that the person viewing the email has on their app or OS.

Here's my code...

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

@media (prefers-color-scheme: dark) {
  .logo {
    background: url(logo-dark.png) center center no-repeat;
  }
}

@media (prefers-color-scheme: light) {
  .logo {
    background: url(logo-light.png) center center no-repeat;
  }
}

.logo {
  display: block;
  height: 42px;
  width: 162px;
}

I have other css classes in the light and dark media queries that are adjusting colors accordingly. It's really just the background-image property that is giving me trouble.

Has anyone experienced this? Any thoughts? Thanks in advance for your help.

Solution

  • Great question.

    I have a couple of articles bookmarked for you from the email gurus!

    This solution from Remi Parmentier utilises <picture> and <source ... media="(prefers-color-scheme:dark)"> - which is supported on Apple Mail - to swap out an <img>. I'm not sure if this was pre- or post- Apple Mail Privacy Protection, which aggressively caches images, but it should work regardless. https://codepen.io/hteumeuleu/pen/porJdjR?editors=1000

    The core of it:

    <div style="margin:auto; text-align:center; width:205px; height:165px;" class="email-picture">
        <picture>
            <source srcset="https://www.hteumeuleu.fr/wp-content/uploads/2021/10/ddg-logo-dark.png" media="(prefers-color-scheme:dark)" />
            <img src="https://www.hteumeuleu.fr/wp-content/uploads/2021/10/ddg-logo-light.png" width="205" height="165" alt="DuckDuckGo" style="vertical-align:middle; max-width:100%; height:auto; font:1em sans-serif; color:#000;" />
        </picture>
    </div>

    Note also the use of the meta tags, and that might be another reason why yours doesn't work. Be sure to include them.

    <meta name="color-scheme" value="light dark" />
<meta name="supported-color-schemes" content="light dark" />

    This one also includes styles for Outlook.com dark mode:

    <style id="css-dark-mode-outlook-com">
    [data-ogsb] { color:#fff !important; background-color:#1c1c1c !important; }
    [data-ogsb] .email-picture { background:url('https://www.hteumeuleu.fr/wp-content/uploads/2021/10/ddg-logo-dark.png') no-repeat center; background-size:contain; }
    [data-ogsb] .email-picture img { visibility:hidden; }
</style>

    The second article explains the use of the html tags picture, source and img, within the context of HTML email: https://www.goodemailcode.com/email-enhancements/picture

    Please note, support for <picture> is limited, however, so is support for @media prefers-color-scheme. Check https://www.caniemail.com/ for details.

    You might also consider giving your fallback/normal logo a white (or your background colour) stroke or soft 'outer glow' (with transparency) so that it can be seen on those email clients that automate - but do not let you control - dark mode colour changes. See https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/ for more details and general background to everything dark mode.