iOS深色模式下Gmail移动端邮件背景色不显示问题求助

问题原因 #

Gmail iOS端的深色主题有特殊逻辑：它会自动检测邮件内容的背景色与文本颜色对比度，当判定背景色不符合深色主题视觉规范，或邮件未明确设置文本颜色时，会强制替换背景色为Gmail默认深色背景。同时MJML生成的默认HTML未针对该行为做适配，导致#27273F背景色在iOS移动端Gmail深色主题下被覆盖。

修复方案 #

1. 添加Gmail深色主题专属样式 #

在MJML的<mj-head>中插入自定义样式，通过Gmail专属的媒体查询和属性选择器强制锁定背景色：

<mj-head>
  <mj-style>
    /* 适配Gmail iOS深色主题 */
    @media (prefers-color-scheme: dark) {
      [data-google-mail-dark-mode="true"] .custom-dark-bg,
      .gmail-dark-mode .custom-dark-bg {
        background-color: #27273F !important;
      }
      /* 明确文本颜色，避免Gmail因对比度问题自动调整 */
      [data-google-mail-dark-mode="true"] .custom-text,
      .gmail-dark-mode .custom-text {
        color: #FFFFFF !important; /* 根据内容需求调整文本色 */
      }
    }
  </mj-style>
</mj-head>

2. 给MJML元素添加自定义类名 #

修改mj-wrapper和mj-section标签，添加自定义类名以便精准定位样式：

<mj-wrapper 
  background-color="#27273F" 
  background-url="https://drive.google.com/uc?export=view&id=1Xn1xfvaC97HohG_eE-IktLq8fkAGghV8" 
  background-size="cover"
  css-class="custom-dark-bg"
>
<!-- 邮件内容 -->
<mj-section 
  padding-left="32px" 
  padding-right="32px" 
  background-color="#27273F"
  css-class="custom-dark-bg"
>
  <mj-text css-class="custom-text">你的文本内容</mj-text>
</mj-section>
</mj-wrapper>

3. 强制内联样式增强优先级 #

在MJML元素中直接添加带!important的内联样式，配合头部样式双重保障：

<mj-wrapper 
  background-color="#27273F !important" 
  background-url="https://drive.google.com/uc?export=view&id=1Xn1xfvaC97HohG_eE-IktLq8fkAGghV8" 
  background-size="cover"
  css-class="custom-dark-bg"
>

4. 背景图片的深色适配（可选） #

如果背景图片在深色主题下显示不协调，可添加深色版本背景图，通过媒体查询切换：

<mj-style>
  @media (prefers-color-scheme: dark) {
    .custom-dark-bg {
      background-image: url('你的深色背景图地址') !important;
    }
  }
</mj-style>

验证方式 #

• 使用Gmail iOS客户端切换到深色主题，发送测试邮件查看实际效果；
• 借助邮件测试工具模拟Gmail iOS深色主题环境验证。

内容的提问来源于stack exchange，提问作者Tymur Mikhieiev