HTML邮件深色模式颜色控制问题：iPhone Gmail自定义样式失效

Gmail在iPhone深色模式下会强制转换邮件中深色背景的区域，常规的prefers-color-scheme媒体查询可能不生效，以下是几个可行的解决方法：

1. 使用Gmail专属深色模式选择器 #

Gmail会在深色模式开启时给页面body添加.gmail-dark-mode类，针对这个类编写样式：

<style>
    /* 适配Gmail深色模式 */
    .gmail-dark-mode .r, 
    .gmail-dark-mode .ys, 
    .gmail-dark-mode .ey {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }
    /* 兼容其他支持深色模式的邮件客户端 */
    @media (prefers-color-scheme: dark) {
        .r, .ys, .ey {
            background-color: #ffffff !important;
            background: #ffffff !important;
        }
    }
</style>

2. 同步修改嵌套表格的背景样式 #

你的代码中目标区域不仅有带类的div，内部还有一个设置了#2d2d2d背景的table，需要同时修改这个元素的样式：

<style>
    .gmail-dark-mode .r, 
    .gmail-dark-mode .ys, 
    .gmail-dark-mode .ey,
    .gmail-dark-mode .ey table {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }
    @media (prefers-color-scheme: dark) {
        .r, .ys, .ey,
        .ey table {
            background-color: #ffffff !important;
            background: #ffffff !important;
        }
    }
</style>

3. 添加meta标签阻止自动颜色转换 #

在邮件头部添加以下meta标签，告知Gmail不要自动调整邮件颜色：

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

额外注意事项 #

• 邮件客户端对外部样式的支持有限，!important声明必须保留，必要时可以把关键样式内联到元素的style属性中。
• 务必用真实iPhone设备的Gmail客户端测试，模拟器的显示效果可能和实际有偏差。

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