iOS 邮件客户端切到深色后,模板标题变成白字配白底,整行看不见,正文也只剩浅灰的轮廓,浅色模式下完全正常。日志里能对上时间点,这种反而好排。
模板给文字写死 #ffffff,背景色靠外层 div 的背景图撑,客户端反转配色时只处理了文字没处理背景。head 里也没声明支持的配色方案,客户端就按自己的规则反色。这一点先确认清楚,后面就不用反复试。
<meta name='color-scheme' content='light dark'> <meta name='supported-color-schemes' content='light dark'> <td bgcolor='#ffffff' style='background:#ffffff;color:#333333'>
「邮件模板深色模式」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。
别只看报错的最后一行,往上看几行,真正的起因通常在上面。
处理上按这个顺序:给 head 加 color-scheme 和 supported-color-schemes 两个 meta,先告诉客户端这封邮件两种模式都支持;文字颜色改成不依赖背景的深灰,背景色用 td 的 bgcolor 属性兜底;在 iOS 和 Outlook 各截一张深色图对比,别只看网页预览。
结果对不对很好判断,深色模式下标题和正文都能看清,两张截图里没有白字白底的区域。
