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

Question

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

在我的head html 上，我有：

<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 中，我有两个带有 dark-logo / light-log 类的徽标。 但是在 iPhone 上它不起作用，我在 Chrome 中尝试了 Outlook 暗模式，它运行良好，在 Android Outlook 上它不起作用。

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

感谢您的帮助。谢谢！

Answer 1

我发现所有设备都兼容的唯一方法是通过 sendgrid 进行徽标推荐

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