桌面

如果我使用CSS：

.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');
        }
    }

则https://www.example.com/img/header_dark.png用于使用暗模式的桌面邮件客户端，例如Office 365 macOS和macOS Ventura Mail，这是正确的行为。

移动的

如果我用途：

@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');
  }
}

则在使用亮模式和暗模式的所有移动的客户端中，.header具有https://www.example.com/service_desk/header_mobile.png的背景，即，暗模式移动的电子邮件客户端不使用https://www.example.com/service_desk/header_mobile_dark.png。

移动的上的暗模式是如何使用媒体查询定位的？

编辑

如果我使用CSS：

@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');
        }
    }

则具有白色背景的默认图像https://images.mandoemedia.com/service_desk/header_mobile.jpg被用于所有移动的暗模式电子邮件客户端，而不是为暗模式指定的图像https://images.mandoemedia.com/service_desk/header_mobile.png。