如何通过媒体查询适配移动端电子邮件客户端的深色模式？

桌面端表现正常 #

使用以下CSS代码时，启用深色模式的桌面邮件客户端（如macOS版Office 365、macOS Ventura邮件）能正确切换深色背景图：

.header {
    background-image: url('https://www.example.com/img/header.png');
}
@media screen and (prefers-color-scheme: dark) {
    .header {
        background-image: url('https://www.example.com/img/header_dark.png');
    }
}

移动端适配失效 #

使用以下代码时，无论移动端客户端是浅色还是深色模式，.header始终使用浅色背景图，深色模式未生效：

@media screen and (max-width: 400px) {
  .header {
    height: 150px;
    background-image: url('https://www.example.com/service_desk/header_mobile.png');
  }
}     
@media screen and (prefers-color-scheme: dark) and (max-width: 400px) {
  .header {
    height: 150px;
    background-image: url('https://www.example.com/service_desk/header_mobile_dark.png');
  }
}

补充尝试仍无效 #

尝试以下写法后，深色模式移动端邮件客户端依旧使用默认浅色图：

@media screen and (max-width: 780px) {
    .header {
        height: 150px;
        background-image: url('https://images.mandoemedia.com/service_desk/header_mobile.jpg');
    }
    [prefers-color-scheme="dark"] .header {
        height: 150px;
        background-image: url('https://images.mandoemedia.com/service_desk/header_mobile.png');
    }
}

核心问题：如何通过媒体查询适配移动端的深色模式？ #

解决方案 #

邮件客户端对CSS媒体查询的支持存在显著差异，尤其是移动端，可尝试以下几种针对性方法：

1. 调整媒体查询加载顺序 #

部分移动端邮件客户端会优先解析先出现的规则，调整顺序让深色模式规则后加载，利用CSS层叠性覆盖通用移动端规则：

/* 先定义深色移动端规则 */
@media screen and (prefers-color-scheme: dark) and (max-width: 400px) {
  .header {
    height: 150px;
    background-image: url('https://www.example.com/service_desk/header_mobile_dark.png');
  }
}
/* 再定义通用移动端规则 */
@media screen and (max-width: 400px) {
  .header {
    height: 150px;
    background-image: url('https://www.example.com/service_desk/header_mobile.png');
  }
}

若客户端支持prefers-color-scheme，深色规则会覆盖通用规则；不支持则默认使用通用规则。

2. 内联样式结合强制覆盖 #

邮件客户端普遍对内联样式支持更好，先设置默认浅色图为内联样式，再通过媒体查询加!important强制覆盖：

<div class="header" style="background-image: url('https://www.example.com/service_desk/header_mobile.png'); height:150px;"></div>

在<style>标签中添加深色模式规则：

@media screen and (prefers-color-scheme: dark) and (max-width: 400px) {
  .header {
    background-image: url('https://www.example.com/service_desk/header_mobile_dark.png') !important;
  }
}

3. 添加webkit前缀适配iOS客户端 #

iOS邮件等部分移动端客户端需要-webkit-前缀才能识别深色模式查询，可同时兼容标准写法：

@media screen and (-webkit-prefers-color-scheme: dark) and (max-width: 400px),
       screen and (prefers-color-scheme: dark) and (max-width: 400px) {
  .header {
    height: 150px;
    background-image: url('https://www.example.com/service_desk/header_mobile_dark.png');
  }
}

4. SVG内部实现颜色切换 #

若允许替换图片格式，使用SVG内置媒体查询实现颜色切换，无需替换整个图片：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="150">
  <style>
    .light-bg { fill: #ffffff; }
    .dark-bg { fill: #222222; display: none; }
    @media (prefers-color-scheme: dark) {
      .light-bg { display: none; }
      .dark-bg { display: block; }
    }
  </style>
  <rect class="light-bg" width="100%" height="100%"/>
  <!-- 添加图标或文字内容 -->
  <rect class="dark-bg" width="100%" height="100%"/>
</svg>

该方式能减少请求量，且在多数支持SVG的邮件客户端中生效。

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