Image for post
Image for post

HELLO DARK MODE, MY NEW FRIEND.

Image for post
Image for post
Image for post
Image for post

BUT WHY DO WE NEED DARK MODE?

Image for post
Image for post

SO, WHAT DOES DARK MODE MEAN FOR THE WORLD OF EMAIL?

Image for post
Image for post

HOW DO I IMPLEMENT DARK MODE?

Image for post
Image for post
Image for post
Image for post

PREFERS-COLOR-SCHEME

@media (prefers-color-scheme: dark) {
body {
background-color: #3D3E40;
color: #FEFEFD;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: #FEFEFD;
color: #3D3E40;
}
}
Image for post
Image for post

LOGOS FOR DARK MODE

CSS:
@media (prefers-color-scheme: dark) {
.darkLogo {
display: none !important;
}
.lightLogoWrapper,
.lightLogo {
display: block !important;
}
}
HTML:
<image src="dark-logo.png" class="darkLogo" />
<!--To hide the light logo perfectly in Outlook and Windows 10 Mail,
you need to wrap the light logo image tag with a div.-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>
Image for post
Image for post

TEST, TEST, TEST

Image for post
Image for post

SO, WHO’S USING IT?

Written by

HIPB2B is a demand gen solution provider, utilizing content, email, and marketing automation to drive outcomes for marketing and technology clients

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store