Outlook App failing to override background color in dark mode for divs in email-CodePudding

I am trying to fix the emails for dark mode in Outlook App. For some reason when in dark mode outlook fails to override the background-color however it correctly overrides the font color, this leads to emails with white background and white text in dark mode. It works fine on browser just the IOS app has this issue. I want to know how i can indicate the App what it should override the background color to. my html code, i have tried both inline styling and css class, both have same issue

<tr>
    <td>
        <div  style="background-color: white;">
            <p class='h5-regular'>
                Some Text
                <br />
                <p class='h5-regular'>
                    Some Text
                </p>
            </p>
        </div>
    </td>
</tr>

CodePudding user response：

Different email clients deal with dark mode differently.

Outlook iOS app supports the @media prefers-color-scheme feature, so you can add your desired code to the <head> (https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
@media (prefers-color-scheme: dark ) {
  .footer { background-color: #000000 !important; }
  p { color: #ffffff !important; }
}
</style>

The meta tags tell the rendering engine that you support both light and dark themes.

See https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/ for further context