Search code examples
javascriptemail-clientdarkmode

Is it possible set dark mode image in email?


I would like not only change text-colors but also various images and icons in the emails. Is it possible/shall I use media-query as the docs say? Shall I used display: none, display: block for images, in different night-day conditions? Will the different email clients not interfere with it?

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


Solution

  • Looks like the way to go (using both @media & [data-ogsc]-prefixes).

    "Will the different email clients not interfere with it?"

    The docs say:

    "As noted above, how email clients in Dark Mode handle your regular HTML emails will vary."

    So you can't be sure if your styles will be overridden or not - that depends on the interpretation of the various and numerous mail-clients.

    As the docs mention, @media (prefers-color-scheme: dark) allows you to create the most robust custom Dark Mode themes where you can implement anything from Dark Mode-specific image swaps, hover effects, background images, while [data-ogsc] prefixes to each CSS rule, target specificly the Outlook app.

    "Shall I used display: none, display: block for images, in different night-day conditions?"

    Could be an option, i.E. via getting the clients systime via JS upon openening/reading the mail..

    Though be aware of:

    Old clients, such as Lotus Notes, Mozilla Thunderbird, Outlook Express, and Windows Live Mail all seem to have supported some sort of JavaScript execution. Nothing else does.

    It seems like a bad idea security-wise, so I would expect this to be a feature that won't always be around, even in these clients.

    As stated in the accepted answer to this question

    So again, you can't rely on JS being enabled/allowed in the various clients (even in message template scripts)..