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

我需要帮助才能知道如何正确识别主题是深色模式还是浅色模式。

感谢您的帮助。谢谢！

Answer 1

我找到所有设备兼容性的唯一方法是通过 sendgrid

进行徽标推荐

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

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

Sendgrid Dark Mode compatibility with two logos

html

css

sendgrid