KN
0
@media (prefers-color-scheme: dark) not working on some devices?
Hello,
I have an email with some styles for dark mode but a coworker with an iphone 8 told me it doesn't work when they view it in Outlook. This doesn't seem to be a problem on newer devices. Is there a mistake that I missed, or am I supposed to use something other than @media (prefers-color-scheme: dark) for slightly older devices?
<style media="all">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
.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;
}
.white {
color: #ffffff !important;
}
.bg-white{background-color:#f5f5f5 !important;}
.black{color:#000000 !important;}
.border-white{border: 1px solid #ffffff !important;}
.border-black{border: 1px solid #000000 !important;}
.text-white {
color: #ffffff !important;
}
.border-black-bottom{border-bottom: 1px solid #000000 !important;}
.border-black-right{border-right: 1px solid #000000 !important;}
}
</style>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;" class="deviceWidth" id="grey-bar-sec">
<tbody>
<tr>
<td bgcolor="#000000" style="background-color:#000000;">
<table width="600" cellpadding="0" cellspacing="0" style="border-spacing: 0; margin:0 auto;width:600px;" border="0" align="center" class="deviceWidth1">
<tbody>
<tr>
<td valign="top" style="vertical-align:top;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<th bgcolor="#000000" width="300" valign="middle" style="border-right:1px solid #f5f5f5; vertical-align:middle;width:300px; background-color:#000000;" class="block mar-top bg-white border-black-right border-black">
<table align="center" style="margin:0 auto;" width="85%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td colspan="4" style="font-size: 1px;line-height: 1px;" height="15"> </td>
</tr>
<tr>
<td width="34" class="bar-left" style="width:34px;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="light-img" valign="top" style="vertical-align:top;">
<img src="https://via.placeholder.com/34x34.png" width="34" alt="Icon 1" />
</td>
</tr>
<!--[if !mso]><! -->
<tr>
<td class="dark-img" valign="top" style="vertical-align:top;display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
<img src="https://via.placeholder.com/34x34.png" width="34" alt="Icon 1" />
</td>
</tr>
<!--<![endif]-->
</tbody>
</table> </td>
<td style="font-size: 1px;line-height: 1px;" width="16"> </td>
<td class="black" width="226" valign="middle" style="vertical-align:middle;text-align:left;color:#ffffff; font-size: 16px;font-weight:bold;line-height:22px;font-family: NeueHaasGrotesk, Helvetica, Arial; width: 226px;">
<div>
<a class="black" href="#" style="color:#ffffff; text-decoration: none;"
>Contact us</a>
</div>
</td>
</tr>
<tr>
<td colspan="5" style="font-size: 1px;line-height: 1px;" height="15"> </td>
</tr>
</tbody>
</table> </th>
<th bgcolor="#000000" class="block mar-top bg-white" width="300" valign="middle" style="vertical-align:middle;width:300px; background-color:#000000;">
<table align="center" style="margin:0 auto;" width="85%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td colspan="5" style="font-size: 1px;line-height: 1px;" height="15"> </td>
</tr>
<tr>
<td width="34" class="bar-left" style="width:34px;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="light-img" valign="top" style="vertical-align:top;">
<div class="mktoImg" id="baricon2">
<img src="https://via.placeholder.com/34x34.png" width="34" alt="Icon 2" />
</div> </td>
</tr>
<!--[if !mso]><! -->
<tr>
<td class="dark-img" valign="top" style="vertical-align:top;display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
<div class="mktoImg" id="baricon20-dark">
<img src="https://via.placeholder.com/34x34.png" width="34" alt="Icon 2" />
</div> </td>
</tr>
<!--<![endif]-->
</tbody>
</table> </td>
<td style="font-size: 1px;line-height: 1px;" width="16"> </td>
<td class="black" width="226" valign="middle" style="vertical-align:middle;text-align:left;color:#ffffff; font-size: 16px;font-weight:bold;line-height:22px;font-family: NeueHaasGrotesk, Helvetica, Arial; width: 226px;">
<div class="mktoText" id="headline2-sec2cd">
<div>
<a class="black" href="#" target="_blank" style="text-decoration: none;color: #fff;"
>Call us at 1-877-297-7816</a>
</div>
</div> </td>
</tr>
<tr>
<td colspan="5" style="font-size: 1px;line-height: 1px;" height="15"> </td>
</tr>
</tbody>
</table> </th>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td colspan="2" style="font-size: 1px;line-height: 1px;" height="0"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
Here is a screenshot of what my coworker sees:
The background color of the boxes around the image and text are supposed to be an off-whtie color in dark mode, but for some reason it's not working.
Not all clients respect the @dark-mode, here's some full documentation:
https://sidemail.io/articles/dark-mode-in-html-email/
It does look like you're trying to force a white display on an accessibility option though, which I'd highly advise against. User experience should be paramount and the users own display decisions should also be top priority. You should not use the query and instead design your emails with transparency and fallbacks for dark mode.
Thank you for the link! That's really helpful!
I agree that it's not a good idea to go against accessibility, so that's why we only try to override certain sections that become hard to see in dark mode if left up to the email client.