HTML Email - control how colors change when user is in dark mode

Question

I am using Figma and Emailify to create HTML for a newsletter that will be sent from account engagement in Salesforce - Pardot. Everything is working great, but when sending a test to my phone, which is in dark mode, some of the colors become unpleasant. How can I tell the receiving device which colors to display instead of what Gmail on iPhone picks. For example, it converts an area with black background and white text to an ugly gray background with black text. I would rather it makes that background white. Here is a snipet of code from one block showing how the Emailify plugin created the code and styled the background color for default mode.

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<![endif]-->

<div class="r ey ys" style="background:#2d2d2d !important;background-color:#2d2d2d;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#2d2d2d;background-color:#2d2d2d;width:100%;">
    <tbody>
        <tr>
            <td style="border:none;direction:ltr;font-size:0;padding:50px 32px 10px 32px;text-align:left;" class=""><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:536px;">
<![endif]-->
<div class="h1 y" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:none;vertical-align:middle;" width="100%">
    <tbody>
        <tr>
            <td align="center" class="x" style="font-size:0;word-break:break-word;">
            <div style="text-align:center;">
            <p style="Margin:0;text-align:center;mso-line-height-alt:32px;mso-ansi-font-size:28px;"><span style="font-size:28px;font-family:'Work Sans','Arial',sans-serif;font-weight:600;color:#ffffff;line-height:114%;mso-line-height-alt:32px;mso-ansi-font-size:28px;">Navigate What’s Next</span></p>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]--></td>
        </tr>
    </tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>

I Googled it and found some notes saying this would work.

<style>
    
    @media (prefer-color-scheme : dark) {
        
        .r, .ys, .ey {
            background-color:#ffffff !important;
            background:#ffffff !important;
        }
        
    }
    
</style>

I know the important tags are a last ditch effort, but it doesn't work with or without them. It remains #d8d8d8 no matter what.

Answer 1

I've checked out a lil' bit on how this could be done, but, as of October 2023, it doesn't seem to be doable by CSS only, at least it will not cover all the browsers for the mobile devices.

click here to see the image

Here's the link to the source I found: https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers (scroll down a little bit, you'll find table)

Hope it helps.