html - 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 上它不起作用。

我需要帮助才能知道如何正确识别主题是处于暗模式还是亮模式。

我很感激帮助。谢谢！

标签： htmlcsssendgrid

Answer 1

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

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