iOS Gmail应用深色模式媒体查询失效，如何显示指定暗色图片

iOS Gmail对标准的prefers-color-scheme: dark媒体查询存在兼容性问题，导致明暗图片切换逻辑无法正常触发。以下是几种可行的解决方法：

方案1：补充Gmail专属属性选择器 #

iOS Gmail在深色模式下会给<body>标签添加[data-dark-mode="true"]或[data-google-dark-mode]属性，将这些选择器加入媒体查询，可提升兼容性：

@media (prefers-color-scheme: dark), body[data-dark-mode="true"], body[data-google-dark-mode] {
  .img-dark {
    display: inline-block !important;
  }
  .img-light {
    display: none !important;
  }
}

注意事项：

• 确保CSS代码放在邮件的<head>标签内，Gmail对<head>中的CSS支持度更高
• 保留原有内联样式的尺寸设置，通过媒体查询的!important强制覆盖显示状态

方案2：使用<picture>原生HTML元素 #

<picture>的<source>标签支持通过media属性指定适配条件，iOS Gmail对这种原生方案的兼容性更稳定，且无需额外CSS：

<picture>
  <source 
    media="(prefers-color-scheme: dark)" 
    srcset="https://viwell.com/wp-content/uploads/2023/10/viwell-logo-dark.png"
  >
  <img 
    class="header-logo" 
    src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo.png" 
    alt="Viwell Logo" 
    style="width: 284px; height: 64px" 
    width="284" 
    height="64" 
  />
</picture>

这种方式直接通过HTML逻辑实现明暗模式适配，代码更简洁。

方案3：调整样式优先级避免冲突 #

若坚持使用双<img>标签，可将初始隐藏样式从内联移到CSS类中，降低内联样式的优先级，让媒体查询能正常覆盖：

修改后的HTML： #

<img
  class="header-logo img-light"
  src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo.png"
  alt="Viwell Logo"
  style="width: 284px; height: 64px"
  width="284"
  height="64"
/>
<img
  class="header-logo img-dark"
  src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo-dark.png"
  alt="Viwell Logo"
  style="width: 284px; height: 64px"
  width="284"
  height="64"
/>

配套CSS： #

/* 基础状态样式 */
.img-dark {
  display: none;
}
.img-light {
  display: inline-block;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark), body[data-dark-mode="true"] {
  .img-dark {
    display: inline-block !important;
  }
  .img-light {
    display: none !important;
  }
}

内容的提问来源于stack exchange，提问作者muhammad waseem