在手机上以暗模式更改 html 电子邮件的背景颜色

即使打开了移动暗模式,我也试图让 HTML 电子邮件具有正常的白色背景,我添加了以下元和媒体查询

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

  @media (prefers-color-scheme: light dark) {
       body {
       background: #ffffff !important;
       color: #ffffff !important;
       }
       h1,h2,h3,h4,p{
        color:#ffffff;
       }
       }

但是当我在我的手机中打开黑暗模式时,背景被覆盖为黑色,字体颜色为白色,请帮忙。

stack overflow Change background colour for html emails in dark mode on mobile phoner
原文答案

答案:

作者头像

您可以尝试此代码,当您想要将文本颜色设为白色时,请提供“aba_white”

@media screen and (prefers-color-scheme:dark) {
    .aba_white { color: #FFFFFF!important; }
    .aba_wrap { background-color: #000000 !important;}
}
作者头像

我遇到了类似的挑战,真正有帮助的是使用 background-image: linear-gradient(colorOfChoice,colorOfChoice) 创建几乎相似的外观颜色,可用于背景。至少对于背景颜色,这非常有效。

暗模式的工作原理是,暗模式有两种实现方式,一种是部分反转,然后是全反转,在全反转中,所有颜色都反转,因为即使是深色也会反转为白色,而在部分反转中,只有白色会被转换为黑色。这是通过在邮件应用程序中呈现时实际更改您的 css 代码来实现的。

但是,如果您使用线性渐变,则不会发生这种转换,并且您的电子邮件会按照您希望的方式呈现。

另请注意,根据 https://www.caniemail.com/ ,gmail 客户端目前不支持 prefers-color-scheme:dark