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/
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)..