cssemailmailchimpnewsletterdarkmode

Mailchimp Dark Mode: Force CTA-Color via CSS

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.

What it should look like:

What it currently looks like:

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!

Solution

  • 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.)