Gmail Android dark mode alters French flag colors in my email template

Other Questions Gmail
1

Help! My email template’s French flag is looking weird in Gmail’s Android dark mode.

I’ve got this French flag image in my HTML email, but Gmail’s Android app is messing with the colors when dark mode is on. It’s turning the white stripe black and swapping the blue and red!

I’ve tried a bunch of things:

  • Using JPG instead of PNG (still changes colors)
  • Trying base64 or SVG images (they don’t show up at all)
  • Making a table with colored cells (blue and red are okay, but white still goes black)

Here’s my current attempt with the table:

<table style="border-collapse: collapse;max-width:60px!important;">
  <tr>
    <td width="20" height="3" style="background-color: #0055A4;"></td>
    <td width="20" height="3" style="background-color: #FFFFFF;"></td>
    <td width="20" height="3" style="background-color: #EF4135;"></td>
  </tr>
</table>

Any ideas on how to keep the white stripe actually white in dark mode? I’m stumped!

2

I’ve encountered similar issues with email templates in dark mode. One solution that’s worked for me is using a transparent PNG image instead of HTML/CSS for the flag. Ensure the image has a transparent background, not white. This approach usually preserves the original colors across different email clients and display modes.

If you must use HTML, try adding ‘data-ogsc’ attributes to your table cells. For example:

<td style="background-color: #FFFFFF;" data-ogsc="background-color: #FFFFFF;"></td>

This tells some email clients to override their dark mode color inversions. It’s not foolproof, but it might help in your case with Gmail’s Android app.

3

yo, that’s a tricky one! have u tried using the ‘color-scheme: light’ CSS property? might force gmail to keep ur flag colors intact. also, could try wrapping the flag in a div with a light bg color. those android dark modes can be a real pain sometimes lol

4

As someone who’s dealt with email rendering issues across various clients, I can relate to your frustration. Have you considered using a VML (Vector Markup Language) approach? It’s an older technique, but surprisingly effective for email clients that struggle with modern CSS.

Here’s a rough idea of how you could implement it:

<!--[if mso]>
<v:rect style='width:60px;height:3px;' fillcolor='#0055A4'>
<v:rect style='width:60px;height:3px;' fillcolor='#FFFFFF'>
<v:rect style='width:60px;height:3px;' fillcolor='#EF4135'>
<![endif]-->

<!--[if !mso]><!-->
<div style='width:60px;height:3px;background:#0055A4;'></div>
<div style='width:60px;height:3px;background:#FFFFFF;'></div>
<div style='width:60px;height:3px;background:#EF4135;'></div>
<!--<![endif]-->

This approach uses VML for Outlook (which is notoriously finicky) and standard HTML for other clients. It might just trick Gmail’s dark mode into preserving your colors. Worth a shot if you’re still struggling!