深色模式 Gmail 签名随机更改 PNG（光栅）图像颜色从黑色到白色

Question

我有一个基于 Gmail（网络应用程序）的电子邮件签名，其中包含托管在服务器上的 PNG 图像（请参阅下面的代码）。我刚刚更新此签名以适应“深色模式”，突然在 Google Pixel 3a 手机（显然是 Android）上的 Gmail 应用程序中查看的深色模式下，自定义 Facebook PNG 图标变成白色（应保持黑色） - 请参阅屏幕截图。后来，LinkedIn 图标也变成了白色，尽管没有提供“深色模式”代码，并且服务器上没有这些自定义图标的白色版本。

据我所知，无法更改光栅图像（PNG）颜色。我很困惑。是不是有什么魔法发生了？谷歌是否学会了在黑暗模式下更改光栅图像颜色？我在网上找不到任何答案。请帮忙。

<head>  
    
<style>
    
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}
a:any-link {
    text-decoration: none !important;
}
    
body { font-family:Helvetica, Arial, sans-serif; font-size:80%; }
    
</style>
    
</head>

Regards,
<br><br>
Name Surname
<br><br>
<i>Title</i>
<br><br><br>
w: <a href="#" target="_blank" style="color:#000000; line-height:1.7em;">#</a>
<br>
<table cellpadding="1" cellspacing="0" border="0" style="line-height:2em;">
    <tr>
        <td>
            <a href="#" title="FB" target="_blank"><img alt="Facebook" src="/email-images/fb-centered-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="/michael" title="Instagram" target="_blank"><img alt="Instagram" src="/email-images/instagram-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="#" title="LinkedIn" target="_blank"><img alt="LinkedIn" src="/email-images/linkedin-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="#" title="YouTube" target="_blank"><img alt="YouTube" src="/email-images/youtube-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="#" title="Amazon" target="_blank"><img alt="Amazon" src="/email-images/amazon-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
    </tr>
</table>
    
<br><br>

<span style="font-size:x-small;">As featured in:</span>
<br><br>

<img alt="BBC Sky The Times Forbes The Telegraph The Observer" src="/email-images/michael-media-logos-980x50px.png" width="490" height="25" style="font-family: sans-serif; color:#000000; font-size:20px; display:block; border:0px;" border="0">

<br>
<div style="color:#000000; font-size:x-small;">Michael Ltd, Company Number 1111, VAT 1111, Registered office: <a href="#" style="text-decoration:none!important; color:#010101!important; border:none!important;" x-apple-data-detectors="false">33 Street, 43440, New York</a></div>

<br><br>

Answer 1

自 2019 年 10 月开始，Gmail 深色模式就出现了这种情况。但 Gmail 确定是否应更改图像的启发式似乎因设备而异，并且从 Android 到 iOS 也有所不同。您可以在这里阅读有很多例子的讨论（包括著名的邪恶喇嘛的例子）。

我不确定你的确切问题是什么，但可以使用

mix-blend-mode

或

filter

等属性在 CSS 中更改位图（如任何格式的图像：JPG、PNG、WebP 等）。我不确定 Gmail 是如何做到这一点的，但它可能发生在他们的图像代理服务器的服务器端。

如果您想轻松查看这样的转换，您可以尝试 Chrome 的自动深色主题，自 Chrome 96 起可在 Chrome 开发者工具中使用（在三点菜单中，然后是渲染，然后使用“模拟自动深色模式”）选项）。

Answer 2

您必须在图像中使用阴影，因此例如白色图标将有黑色阴影。这样它就可以在两种模式下工作。

另请注意，有些图像没有反转，因此您可以测试其他格式。

您无法使用 hack 来处理所有电子邮件客户端，因为有些客户端完全忽略深色模式样式（例如 iOS 中的 Gmail）。

深色模式 Gmail 签名随机更改 PNG（光栅）图像颜色从黑色到白色

问题描述投票：0回答：2

2个回答

最新问题

深色模式 Gmail 签名随机更改 PNG（光栅）图像颜色从黑色到白色

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2