OL Office 365 Dark for Windows Background Behind Text

Question

I have an email that properly renders or logically flips colors in Dark Mode except for the OL Office 365 Dark for Windows and Outlook 2021 Dark for Windows, there is a different flipped background behind the copy only, not the entire element, and also the copy color flips from white to black, which makes some sections look wonky:

Here is the code I have for one of them:

<tr>
                  <td align="center" style="text-align:center; background-color:#7F3342;">
                    <!--[if mso]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:600px;" stroke="f" fillcolor="#7F3342">
                      <w:anchorlock/>
                        <center>
                    <![endif]-->
                    <a href="#"
                      target="_blank" rel="noopener" class="graphic"
                      style="text-align:center; background-color:#7F3342; color:#fff; display:inline-block; text-decoration:none; width:600px; font-family:Helvetica, Arial, sans-serif; font-size:14px; letter-spacing: 1.5px; font-weight:600; line-height:40px; -webkit-text-size-adjust:none; white-space: nowrap;">
                      SUBSCRIBE TO OUR NEWSLETTER
                    </a>
                    <!--[if mso]>
                        </center>
                      </v:rect>
                    <![endif]-->
                  </td>
                </tr>

The expectation is the burgundy color behind the text too, no light pastel, and white copy color, which is how it renders everywhere else.

Answer 1

I don't believe there's a code-based solution for Outlook 365/Desktop dark modes.

The email client gives no official support: https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers

But there is a hack for text - but not background colours AFAIK: https://webdesign.tutsplus.com/how-to-fix-outlook-dark-mode-problems--cms-37718t

Given these limitations, your best bet if it's a must is to conditionally create an image button. Since you have a VML solution anyway (although it's not necessary for non-rounded corner buttons), you won't lose out on accessibility - as VML creates an image out of the link, and screenreaders don't read VML.

So you could write:

    <td align="center" style="text-align:center; background-color:#7F3342">
<a href="#" target="_blank" rel="noopener" class="graphic" style="text-align:center; background-color:#7F3342; color:#fff; display:inline-block; text-decoration:none; width:600px; font-family:Helvetica, Arial, sans-serif; font-size:14px; letter-spacing: 1.5px; font-weight:600; line-height:40px; -webkit-text-size-adjust:none; white-space: nowrap;">
                  <!--[if !mso]><!-->SUBSCRIBE TO OUR NEWSLETTER<!--<![endif]-->
<!--[if mso]><img src="https://via.placeholder.com/200x50" alt="Subscribe to our newsletter" width="200" /><![endif]-->
                </a>
    </td>