Hello All,

I have an email template where I applied a background to a "callout" box, on dark mode previews, I'm not able targeting the text color in this box with the background, and didn't find any additional info here: https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/

/************/

@media (prefers-color-scheme: dark) {
h1, h2, h3, p, span, a, b {
color: #ffffff !important;
}
.boxcallout {
background-color: #eeeeee !important;
}
.callout {
color: #d9232e !important;
}

.darkmode { background-color: #272623 !important; }
}

/************/

<table border="0" cellpadding="0" cellspacing="0" width="600" height="200" class="container" style="border-collapse: collapse !important; width: 600px;">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="middle" background="https://go.microstrategy.com/rs/750-TDG-583/images/webinar background_email banner 600x400.jpg" style=" background-image: url('https://go.microstrategy.com/rs/750-TDG-583/images/webinar background_email banner 600x400.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; width:600px;" class="wrapper boxcallout"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:auto;">
<v:fill type="frame" src="https://go.microstrategy.com/rs/750-TDG-583/images/webinar background_email banner 600x400.jpg" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div style="font-size:1px;line-height:1px">

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container boxcallout">
<tbody>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td height="200" align="center" valign="top" class="wrapper">
<![endif]-->

<table cellpadding="0" cellspacing="0" width="100%" class="container" align="center" style="border-collapse: collapse !important;">
<tbody>
<tr>
<td class="wrapper"><table cellpadding="0" cellspacing="0" class="container" width="100%" align="center" style="border-collapse: collapse !important; ">
<tbody>
<tr>
<td height="20" style=" font-size: 20px; line-height: 20px;"> </td>
</tr>
<tr>
<td align="left" valign="middle" style=" padding: 0px 30px 0px 30px; color: #333333; font-family: 'Helvetica', Arial, sans-serif; font-size: 16px;font-weight: 400; line-height: 25px;" class="wrapper"><table cellpadding="0" cellspacing="0" class="container" width="500" align="center" style="border-collapse: collapse !important;">
<tbody>
<tr>
<td align="left" width="460" valign="top" style="font-size: 16px; font-family: 'Helvetica', Arial, sans-serif; color: #333333;line-height: 25px;" class="wrapper"><div class="mktoText" id="footer_title" mktoname="Edit Footer call to action title">
<h2 style="font-weight: normal; font-family: 'Helvetica', Arial, sans-serif; line-height: 24px; margin: 0;" class="callout">On-Demand Webcast</h2>
</div>
<div class="mktoText" id="footer_cta_par" mktoname="Edit Footer call to action text">
<p style="font-weight: normal; font-family: 'Helvetica', Arial, sans-serif;line-height: 25px;" class="callout">We’ve got a library of informative webcasts available on-demand.</p>
</div>
<table border="0" cellspacing="0" cellpadding="0" class="center" width="50%" bgcolor="#d9232e">
<tr>
<td align="center" style="background: #d9232e;"><div class="mktoText" id="footer_cta_link" mktoname="Edit Footer CTA"><a href="https://www.microstrategy.com/us/resources/library/webcasts" target="_blank" style="font-size: 16px; font-family:'Helvetica', Arial, sans-serif; font-weight: 400; color: #ffffff; text-decoration: none; border-top: 8px solid #d9232e; border-bottom: 8px solid #d9232e; border-right: 12px solid #d9232e; border-left: 12px solid #d9232e; display: inline-block; text-align: center">View Now</a></div></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="20" style=" font-size: 20px; line-height: 20px;"> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>

<!--[if gte mso 9]>
</td>
</tr>
</tbody>
</table>
</div>
/v:textbox
/v:rect
<![endif]--></td>
</tr>
</tbody>
</table>