How to support dark mode
BetaThis feature is new and we're actively working to improve it. UpdatedYou can customize how your message appears in dark mode when a user’s device or inbox is set to that preference. Open an email in the code editor of Design Studio to get started.
Check out Preview controls > Color scheme to understand Forced dark mode.
Customize styles for dark mode
To create a custom version of your email for dark mode, you’ll need to add @media
queries that target the attribute prefers-color-scheme
in a <style>
tag. Check out Can I Email to see which email clients support this feature.
We’re working towards implementing a code-free way to customize dark mode styles.
Code using standard components:
<x-head>
<style>
@media (prefers-color-scheme:dark) {
.body, .wrapper {
background: #333 !important;
color:#eee !important;
}
.dark-img img{
opacity:0;
}
.dark-img{
display:inline-block;
background:url('https://assets.chrisruppel.com/img/blog/picture-mq-dark.jpg') center /cover;
}
}
</style>
</x-head>
<x-base class="wrapper">
<x-section>
<x-heading-1>Dark mode styles</x-heading-1>
<x-paragraph>Setting dark mode styles in email clients</x-paragraph>
<span class="dark-img">
<img src="https://assets.chrisruppel.com/img/blog/picture-mq-original.jpg" alt="balcony" width="600" style="max-width:100%;"
/>
</span>
</x-section>
</x-base>
Processed code (visible in the code editor under Source):
<!doctype html>
<html lang="und" dir="auto" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="color-scheme" content="normal" />
<meta name="supported-color-schemes" content="normal" />
<title></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
:root {
color-scheme: normal;
supported-color-schemes: normal;
}
</style>
<style>
.x-wrapper {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a[x-apple-data-detectors] {
word-break: normal;
}
</style>
<style>
body {
margin: 0;
padding: 0 !important;
}
table.mso {
mso-cellspacing: 0;
padding: 0;
font-size: medium;
line-height: 150%;
font-family: Helvetica, sans-serif;
}
table.mso td {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
td {
mso-hyphenate: none;
}
</style>
<style id="global-styles-link">
a {
color: #e7121f;
font-weight: 400;
text-decoration: underline;
}
</style>
<style>
@media (prefers-color-scheme:dark) {
.body,
.wrapper {
background: #333 !important;
color: #eee !important;
}
.dark-img img {
opacity: 0;
}
.dark-img {
display: inline-block;
background: url('https://assets.chrisruppel.com/img/blog/picture-mq-dark.jpg') center /cover;
}
}
</style>
<style data-isolated="thunderbird" media="(prefers-color-scheme: dark)">
</style>
</head>
<body class="body" style="background: #fefefe;">
<div role="article" aria-roledescription="email" aria-label="" lang="und" dir="auto" style="font-size: max(16px, 1rem);color: #000000; background: #fefefe; line-height: 1.5; mso-line-height-alt: 150%; font-family: Helvetica, sans-serif; word-break: normal; word-wrap: normal; word-spacing: normal;" class="wrapper x-wrapper">
<div>
<!--[if true]><table role="none" class="mso" align="left" style="width: 100%;">
<tr>
<td></td>
<td style="width: 640px; padding: 20px;">
<![endif]--><!--[if !true]><!--><div style="max-width: 640px; margin-left: auto; margin-right: auto;">
<!--<![endif]--><div style="padding: 20px; overflow: auto;">
<h1 style="font-size: 32px; margin: 21px 0;">Dark mode styles</h1>
<p style="margin: 16px 0;">Setting dark mode styles in email clients</p>
<span class="dark-img">
<img src="https://assets.chrisruppel.com/img/blog/picture-mq-original.jpg" alt="balcony" width="600" style="max-width:100%;"
/>
</span>
</div>
<!--[if !true]><!-->
</div>
<! <!--[if true]>
</td>
<td></td>
</tr>
</table>
<![endif]-->
</div>
</div>
</body>
</html>