Search code examples
htmlemailgmailhtml-emailmjml

HTML email background color is not displayed in Gmail/mobile/iOS/dark mode

Introductory information

I wrote the MJML code for the email and then converted it to HTML. As a result, everything works as it should but the background color is not displayed if the following conditions are true:

  • email client is Gmail
  • mobile version is used
  • dark theme is active
  • the OS is iOS

Examples

The background color is set for the mj-wrapper tag and the mj-section tags:

  • <mj-wrapper background-color="#27273F" background-url="https://drive.google.com/uc?export=view&id=1Xn1xfvaC97HohG_eE-IktLq8fkAGghV8" background-size="cover">
  • <mj-section padding-left="32px" padding-right="32px" background-color="#27273F" />

This is what it looks like on a desktop (correctly):

enter image description here

Here's what it looks like in the mobile version of Gmail on android (the same for the gmail mobile iOS version using light theme) (correctly):

enter image description here

And this is what it looks like in the mobile version of Gmail on iOS if you use a dark theme (the bg-color (#27273F) is not displayed):

enter image description here

Question

Could you please help me figure out what's causing the issue and how to fix it?

Additional Info

GitHub link - Here you can see both HTML and MJML code

Thank you!

Solution

  • Gmail iOS dark mode conducts a full inversion of your colours without thinking about it. Thus, even a darkly coloured email will get changed to light colours in 'dark mode', as you have experienced!

    Furthermore, Gmail iOS provides no controls such as @media (prefers-color-scheme).

    I noticed the image didn't get inverted. Maybe it could look nice to have the banner as an image, fading into transparency at the bottom (saved as png24). Then on light mode, it fades into the dark colour, but on dark mode, it fades into light.

    A more technical option that may or may not work could be (untested) to have a 1x1 pixel background image the colour you want, and then use this hack to keep the text white: https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/.