Our emails do not rendering properly when users have Dark Mode enabled on their devices. We’re seeing this on Outlook desktop, Outlook web, and the Gmail app. See example of what dark mode users see. We'd like to be able to implement code directly into the email templates.
This is the code we'd like inserted into the head of the template code:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
:root { color-scheme: light dark; supported-color-schemes: light dark; }
</style>
The second thing would be to allow dark mode specific classes to be used in the template which would then be added to the content blocks. If possible, we would like to also add the following code (also in the head of the template code:
<style type="text/css">
.dm_TemplateBG {background-color:#121212 !important;}
.dm_ContentBG {background-color:#212121 !important;}
.dm_ContentBGALT {background-color:#121212 !important;}
.dm_CTABG {background-color:#F54A48 !important;}
.dm_CTABorderBG {border-color: #F54A48 !important;}
.dm_CTATextColor , .dm_CTATextColor a {color:#ffffff !important;}
.dm_DescriptionColor, .dm_TitleColor, .dm_SubTitleColor {color: #CACACA !important;}
.dm_DescriptionColorALT, .dm_TitleColor ALT, .dm_SubTitleColorALT {color: #F54A48 !important;}
.dark-img { display: block !important; width: auto !important; overflow: visible !important; float: none !important; max-height: inherit !important; max-width: inherit !important; line-height: auto !important; margin-top: 0px !important; visibility: inherit !important; }
.light-img { display: none; display: none !important; overflow: hidden; float: left; width: 0px; max-height: 0px; max-width: 0px; line-height: 0px; visibility: hidden; }
</style>
Thank you,
