css - 如何使用首选颜色方案媒体查询在电子邮件中呈现不同的图标？

Question

我正在尝试更改通过应用程序发送的电子邮件上的图标。

目前，我使用的方法是创建两组不同的图标，一组用于浅色模式，一组用于深色模式，并将一个或另一个的 CSS 显示属性设置为无。

像这样

//for light mode
@media (prefers-color-scheme: light) {
        .icon-dark{
            display: none !important;
        }
    }

//for dark mode
@media (prefers-color-scheme: dark ) {
        .icon-light{
            display: none !important;
        }
    }

我想问的是这是最好的方法吗？理想情况下，我希望只有一组图标并相应地更改其路径，但仅使用 CSS，我认为这是不可能的。

你建议什么是最好的解决方案？

Answer 1

正如Litmus中所述，它们目前还不是关于如何处理暗模式的标准，因为每个电子邮件客户端都使用不同的方式来处理它。

下面的图表给出了流行的电子邮件客户端的备忘单（取自上面的链接）。

至于处理在不同模式下显示不同图标的最佳方法，使用媒体查询“prefers-color-scheme”并将css属性“display：none”赋予您不想显示的任何元素。最好确保您也有默认样式。（内联样式）