1

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>&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>
bartsamuel
  • 11
  • 4

1 Answers1

0

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

HTeuMeuLeu
  • 1,851
  • 1
  • 7
  • 17
  • Thank you so much for this answer and the links. I'll try to fix this issue now that I know what might be causing it. – bartsamuel Mar 04 '22 at 11:23