英文:
Mailchimp Dark Mode: Force CTA-Color via CSS
问题
我的CTA按钮的常规背景颜色是#6BBD45，字体颜色是#fff。然而，在我的iPhone上启用深色模式时，它变得更加深色（当然...） - 背景颜色为#2d601d，字体颜色为#222126 - 因此完全利用了它的鲜明、引人注目的效果。
是否有一行CSS代码，我可以使用它来强制Mailchimp呈现原始颜色？理想情况下，我希望找到一个在所有设备和电子邮件客户端上都有效的解决方案。
英文:
The regular background color of my CTA-button is #6BBD45 with #fff font color. However, when viewed on my iPhone in dark mode it becomes much darker (duh...) – background color #2d601d, font color #222126 – hence completely using its vivid, attention-drawing effect.
Is there a line in CSS that I could use to force Mailchimp to render the original colors? Ideally, I am looking for a solution that works across all devices and email clients.
I know that there are potential workarounds, such as creating visuals in Adobe XD or the like and then adding the button or even the entire section as an image file. However, I am looking for a sustainable solution that saves me time and troubles in the long run.
Thank you!
答案1
得分: 1
不幸的是，Mailchimp对此无法做太多。每个具有深色模式的电子邮件客户端都有一种不同的方式来应用强制深色模式。您没有提到使用的电子邮件客户端或在哪个系统中截取的屏幕，所以我将介绍主要的三种情况。
Apple Mail
对于Apple Mail，通常可以通过将以下内容添加到电子邮件的<head>部分来保持初始颜色：
<meta name="supported-color-schemes" content="light" />
<style>
:root {
color-scheme: light;
}
</style>
(<meta>标签适用于Apple Mail 12，而CSS版本适用于更新的版本。)
不过，Apple Mail可能仍然强制启用其深色模式。因此，您可以尝试使用略微不同的灰色阴影，而不是纯白色。例如，可以使用#fffffe代替#ffffff。
Outlook
在iOS、Android和Outlook.com上，通过在CSS中内联设置新颜色来强制启用深色模式。先前的颜色保存在自定义的专有data-ogsc或data-ogsb属性中。虽然您无法强制将文本设置为白色，但您仍然可以尝试通过为按钮设置不同的背景颜色来进行微调，例如：
<style>
[data-ogsb] .button {
color: #5eba7d;
}
</style>
Gmail
在iOS和Android上，Gmail强制启用其深色模式，我们无法做太多改变。有一个涉及CSS混合模式的解决方案。但这很复杂，只对任何背景上的白色文本有效（在您的情况下会起作用）。
英文:
Unfortunately, this not something Mailchimp can do much about. Each email client with a dark mode has a different way to apply a forced dark mode. You didn't mention which email client nor which system you took your screenshot in so I'll go through the main three.
Apple Mail
In the case of Apple Mail, you can usually maintain your initial colors by adding the following to the <head> of your email:
<meta name="supported-color-schemes" content="light" />
<style>
:root {
color-scheme: light;
}
</style>
(The <meta> tag is for Apple Mail 12 while the CSS version is for newer versions.)
Apple Mail may still enforce its dark mode though. So what you can try it to set a slightly different shade of grey instead of pure white. For example, use #fffffe instead of #ffffff.
Outlook
On iOS, Android and on Outlook.com, the forced dark mode is applied by setting new color inline in CSS. The previous color is saved in custom proprietary data-ogsc or data-ogsb attributes. While you won't be able to force your text to white here, you can still try to tweak things by setting a different background-color to your button for example.
<style>
[data-ogsb] .button {
color: #5eba7d;
}
</style>
Gmail
In iOS and Android, Gmail forces its dark mode and there ain’t really much we can do about it. There’s a solution involving CSS Blend Modes. But it’s complex and only works with white text on any background. (Which would work in your case.)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论