求助：macOS Catalina下Outlook 365深色模式按钮背景色反转问题

I’ve run into this exact quirky issue with Outlook for Mac’s dark mode before—its Word-based rendering engine has some stubborn behavior when it comes to light-colored button backgrounds on links. Let’s break down the practical fixes that actually work:

The Root Problem #

Outlook for Mac (Office 365) uses a custom dark mode logic that automatically inverts high-contrast light backgrounds on <a> tags, even when you’ve set color-scheme meta tags or dark mode media queries. Its legacy engine doesn’t fully respect modern CSS rules for this scenario, so we need targeted workarounds.

Solution 1: Combine VML (for Outlook) + Modern HTML/CSS (for All Other Clients) #

Outlook supports VML (Vector Markup Language) for custom shapes and buttons, which bypasses its automatic color inversion entirely. We’ll use conditional comments to serve VML only to Outlook, while keeping standard HTML for every other email client:

<td align="center" valign="middle" style="padding: 0;">
  <!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:44px;v-text-anchor:middle;width:auto;" arcsize="10%" stroke="f" fill="t">
    <v:fill type="solid" color="#dde0e1" />
    <w:anchorlock/>
    <v:textbox style="mso-fit-shape-to-text:true;">
      <center style="font-size:17px;font-weight:bold;color:#1e5d7b;">VIEW DEMO</center>
    </v:textbox>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-->
  <a class="darkmode-light-button" href="https://example.com" target="_blank" style="font-size: 17px;font-weight: bold;text-decoration: none;color: #1e5d7b;background-color: #dde0e1;border-radius: 10px;display: inline-block;padding: 12px 20px; data-ogsc='light';">VIEW DEMO</a>
  <!--<![endif]-->
</td>

Key Details: #

• VML Block: This renders a fully styled button directly in Outlook, with fixed background color (#dde0e1) and text color—no inversion possible. The arcsize="10%" matches your original 10px border-radius.
• Non-Outlook Block: We add the data-ogsc="light" attribute to the <a> tag—this is an Outlook-specific property that forces the element to use light-mode styling, overriding dark mode inversion.
• Full Clickable Area: The VML button links directly to your URL, and the standard <a> tag uses padding instead of borders to ensure the entire button is clickable.

Solution 2: Fix the TD + Link Issue (Simpler Approach) #

If you prefer sticking to your original structure but fixing the "unclickable button" problem when moving styles to the <td>:

<td align="center" style="background-color: #dde0e1; border-radius: 10px; padding: 0;">
  <a class="darkmode-light-button" href="https://example.com" target="_blank" style="font-size: 17px;font-weight: bold;text-decoration: none;color: #1e5d7b;display: block; padding: 12px 20px; width: 100%; box-sizing: border-box; data-ogsc='light';">VIEW DEMO</a>
</td>

What Changed: #

• Set the <td> to have padding: 0 and move the button’s internal spacing to the <a> tag as padding.
• Make the <a> tag display: block with width: 100% and box-sizing: border-box—this ensures the link fills the entire <td> so the whole button area is clickable.
• Add data-ogsc="light" to the <a> tag to block Outlook’s dark mode inversion.

Why Your Previous Attempts Didn’t Work #

• The osgb attribute is designed for older Windows Outlook versions, not macOS Office 365.
• Media queries like prefers-color-scheme: dark are ignored by Outlook for Mac’s Word engine, so they won’t override the automatic inversion.

内容的提问来源于stack exchange，提问作者Drew