具有两个徽标的Sendgrid Dark Mode兼容性

问题描述

我正在使用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上却不起作用。

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

感谢您的帮助。谢谢！

解决方法

我发现所有设备都兼容的唯一方法是通过sendgrid

进行徽标推荐

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