For some reason, the text <p> in the footer section of my email template in Outlook 365 Windows is still remaining the color black. This is also happening for the button text too <a> but all other clients are fine when tested.
Here is the media query and footer markup:
@media (prefers-color-scheme: dark) {
body, center, table {
background: #2d2d2d!important;
color: #ffffff!important;
}
.darkmode-footer {
background-color: #7F7CAC!important;
}
.darkmode-social {
background-color: #60C1CB!important;
}
}
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-spacing: 0px; color: #565656; font-family: 'Lato', sans-serif, Arial, Helvitica!important; background-color: #fafdfe; Margin: 0; padding: 0; width: 100%; max-width: 600px;" role="presentation">
<!-- START FOOTER -->
<tr>
<td style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" class="darkmode-footer" width="100%" style="border-spacing: 0; background-color: #7F7CAC;" role="presentation">
<tr>
<td height="8" style="background-color: #21c6b8;"></td>
</tr>
<tr>
<td style="padding: 60px 10px 25px 10px; color: #ffffff; text-align: center; font-size: 16px;">
<p style="font-size: 18px; font-weight: bold; padding: 10px 0 5px 0;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
<p style="font-size: 16px; padding-bottom: 20px;"><a href="*" style="text-decoration: none; color: #e8fbfa;"></a>Lorum</p>
</td>
</tr>
<tr>
</tr>
<tr>
<td height="8" style="background-color: #21c6b8;"></td>
</tr>
</table>
</td>
</tr>
<!-- END FOOTER -->
</table>
And here is a snippet of the button markup:
<tr>
<td align="left" style="padding-left: 10px;">
<table cellpadding="0" cellspacing="0" border="0" align="left" border="0" style="border-spacing: 0;" role="presentation">
<tr>
<td style="border-radius: 10px;" bgcolor="#60C1CB">
<a href="*" target="_blank" style="text-decoration: none; color: #ffffff; color: #ffffff; background-color: #60C1CB; border: 1px solid #60C1CB; border-radius: 10px; padding: 10px 25px; display: inline-block; font-size: 16px; font-weight: bold;">Lorum</a>
</td>
</tr>
</table>
</td>
</tr>
I can add more markup if needed.