Sendgrid 深色模式与两个徽标的兼容性

Question

我正在使用 Sendgrid，但它与深色模式下的徽标冲突，我的徽标是黑色的，我不想在字母上添加白色边框。我有两个徽标，一黑一白。我需要在所有设备上检测何时处于黑暗模式以及何时不处于黑暗模式。

在我的headhtml 上我有：

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

在 css 样式中我有这样的：

    .dark-block { display: none; }
    .dark-logo { display: none; }
    @media (prefers-color-scheme: dark ) {
      .dark-logo { display:inline !important; line-height: auto !important; }
      .light-logo { display:none; display:none !important; }
      .light-block { display:none; }
      .dark-block { display:block; }
      
      body, p, a, td {
          color: #FFFFFF !important;
      }
    }

然后在我的 html 中，我有两个带有 class 的徽标dark-logo / light-log。但在 iPhone 上它不起作用，我在 Chrome 中尝试过 Outlook 深色模式，它工作得很好，在 Android Outlook 上它不起作用。

我需要帮助来了解如何正确识别主题是处于深色模式还是浅色模式。

我很感激你的帮助。谢谢你！

Answer 1

我找到所有设备兼容性的唯一方法是通过 sendgrid 进行徽标推荐

@media (prefers-color-scheme: dark )不起作用时添加白色边框。