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

Other Questions Gmail
1

Help! My French flag is all mixed up in Gmail’s dark mode!

I’m trying to add a French flag to my email template, but Gmail on Android is giving me a headache. In dark mode, it’s turning the colors upside down!

Here’s what’s happening:

  • Normal mode: Blue, white, red (correct)
  • Dark mode: Red, black, blue (totally wrong!)

I’ve tried a bunch of stuff:

  • JPG? Nope, still changes
  • Base64? Doesn’t show up
  • SVG? Invisible
  • HTML table with background colors? Almost works, but white turns black

Here’s my current code:

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

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

2

hey there! have you tried using a transparent PNG instead? that might work better with dark mode. also, you could try adding a light border around the white stripe to keep it visible. something like:

<td style="background-color: #FFFFFF; border: 1px solid #e0e0e0;"></td>

hope that helps!

3

Have you considered using CSS custom properties (variables) with a fallback value? This approach can help maintain color consistency across different modes. Here’s an example:

<style>
  :root { --flag-white: #FFFFFF; }
  @media (prefers-color-scheme: dark) {
    :root { --flag-white: #FFFFFF; }
  }
</style>
<table style="border-collapse: collapse; width: 60px;">
  <tr>
    <td style="background-color: #0055A4; width: 20px; height: 13px;"></td>
    <td style="background-color: var(--flag-white, #FFFFFF); width: 20px;"></td>
    <td style="background-color: #EF4135; width: 20px;"></td>
  </tr>
</table>

This method explicitly sets the white color for both light and dark modes, which should prevent Gmail from inverting it. Remember to test thoroughly, as email client support for CSS can vary.

4

I’ve encountered this issue before, and it can be frustrating. One solution that worked for me was using a background image instead of individual color blocks. Create a single image of the French flag and set it as the background of a div or table cell. This method tends to be more resilient to dark mode changes.

Here’s a snippet that might help:

<div style="background-image: url('path-to-your-flag-image.png'); background-size: cover; width: 60px; height: 40px;"></div>

Make sure your image has good contrast between the colors, especially the white stripe. You might need to experiment with different image formats (PNG, WebP) to find what works best across various email clients and dark mode settings. Good luck with your template!