CODEWITHSUNDEEP
emailhtml-emaildarkmodeios-darkmodeandroid-darkmode
bartsamuel
bartsamuel

Reputation: 21

Dark mode Gmail signature randomly changing PNG (raster) image colours from black to white

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>

Upvotes: 2

Views: 4349

Answers (2)

Martin Zvar&#237;k
Martin Zvar&#237;k

Reputation: 2479

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

Upvotes: 0

HTeuMeuLeu
HTeuMeuLeu

Reputation: 2811

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

Upvotes: 1

Related Questions