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

【问题标题】：How to render different icons in an email using prefers-color-scheme Media Query?如何使用首选颜色方案媒体查询在电子邮件中呈现不同的图标？
【发布时间】：2020-11-30 16:35:22
【问题描述】：

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

目前，我使用的方法是创建两组不同的图标，一组用于亮模式，一组用于暗模式，并将一个或另一个的 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，我认为这是不可能的。

您认为最好的解决方案是什么？

【问题讨论】：

标签： css media-queries darkmode

【解决方案1】：

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

下面的图表为流行的电子邮件客户端提供了一份备忘单（取自上面的链接）。

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

【讨论】：