如何使用 prefers-color-scheme 媒体查询在电子邮件中呈现不同的图标？

Question

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

目前，我使用的方法是创建两组不同的图标，一组用于浅色模式，一组用于深色模式，然后设置其中一个的 CSS 显示属性到 none.

像这样

//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 所述，它们目前不是关于如何处理暗模式的标准，因为每个电子邮件客户端都使用不同的方式来处理它。

下面的图表给出了流行电子邮件客户端的作弊 sheet（摘自上面的 link）。

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

如何使用 prefers-color-scheme 媒体查询在电子邮件中呈现不同的图标？

How to render different icons in an email using prefers-color-scheme Media Query?

css

media-queries

darkmode