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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td> 
</tr> 
</tbody> 
</table> </th> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<tr> 
<td colspan="2" style="font-size: 1px;line-height: 1px;" height="0">&nbsp;</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table>

Here is a screenshot of what my coworker sees:
http://na-sj29.marketo.com/rs/331-YSY-487/images/Dark Mode Issue.jpg
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.