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

发布于 2025-01-11 11:42:47 字数 3929 浏览 0 评论 0原文

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

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

屏幕截图 1:Android Gmail 应用 - 黑色图标

屏幕截图 2:Android Gmail 应用 - 自定义 Facebook 图标变成白色

屏幕截图 3:Android Gmail 应用 - 自定义 Facebook 和 LinkedIn 图标变白

<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>

I have a Gmail (web app) based email signature with PNG images hosted on a server (please see the code below). I was just updating this signature to accommodate for "dark mode" and suddenly the custom Facebook PNG icon turned white (should stay black) in dark mode viewed in Gmail app on Google Pixel 3a phone (obviously Android) - please see screenshots. Later also the LinkedIn icon turned white, even though there is no "dark mode" code provided and there are no white versions of these custom icons on the server.

To my knowledge there's no way of changing raster image (PNG) colours. I'm baffled. Is there some magic happening? Did Google learn to change raster image colours in dark mode? I couldn't find any answers online. Please help.

Screenshot 1: Android Gmail app - black icons

Screenshot 2: Android Gmail app - custom Facebook icon turned white

Screenshot 3: Android Gmail app - custom Facebook and LinkedIn icons turned white

<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>  </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>  </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>  </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>  </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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

苏辞 2025-01-18 11:42:47

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

我不确定你的确切问题是什么,但可以使用诸如 mix-blend-mode 之类的属性来更改 CSS 中的位图(例如任何格式的图像:JPG、PNG、WebP 等)代码>或<代码>过滤器。我不确定 Gmail 是如何做到这一点的,但它可能发生在他们的图像代理服务器的服务器端。

如果您想轻松了解这样的转换,可以尝试 Chrome 的 Auto Dark主题,自 Chrome 96 起在 Chrome 开发者工具中可用(在三点菜单中,然后是渲染,然后使用“模拟自动暗模式”选项)。

This has been happening in Gmail dark mode since its beginning in october 2019. But Gmail’s heuristics to determinate if an image should be changed seems to change from device to device and vary from Android to iOS. You can read a discussion with many examples here (including the famous evil lama example).

I'm not sure what your exact question is, but it is possible to change a bitmap (like an image in any format: JPG, PNG, WebP, …) in CSS using properties like mix-blend-mode or filter. I’m not sure this is how Gmail does it though here, and it might happen server side on their image proxy server.

If you want to get an easy look at transformations like this, you can try Chrome’s Auto Dark Theme, available in Chrome DevTools since Chrome 96 (in the three dots menu, then Rendering, then with the “Emulate auto dark mode” option).

堇年纸鸢 2025-01-18 11:42:47

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

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

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

You have to use shadows in your images, so for example white icon will have black shadows. That way it works in both modes.

Also note that some images are not inverted, so you can test other formats.

You can't handle all email clients using hacks, because some are ignoring dark mode styles completely (like Gmail in iOS).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文