Shopify Emails Not Working in Dark Mode (Colors Invert)

Hello! I’ve noticed that for us and many stores using Shopify to send emails - our emails fall victim to the IOS dark mode that everyone uses on their mobile device. Thus the colors and integrity of the email are inverted. Rather than optimizing emails to be viewed in dark mode - I know there has to be another way.

Brands do market to their customers using emails that do not get altered. I’m wondering if the only way they get away with it is by uploading a custom-built HTML email in klaviyo - and there are no adjustments we can make in shopify?

Please do let me know - It’s been a struggle to make the emails stay on brand with both dark mode viewers on mobile and desktop viewers as well. I’d rather force the email to remain constant. Thanks!

3 Likes

can you share the URL?

Hello @Mvtimes07 ,

I am Gina from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot. I am here to support you.

There are several factors that may be causing your Shopify emails to malfunction in dark mode, resulting in inverted colors and compromised email integrity. Consider the following steps to address this issue.

  • Verify your email client’s settings to ensure that dark mode is disabled. Enabling dark mode in your email client can cause compatibility issues with the email’s colors and formatting.

  • Utilize email testing tools to preview your emails in different email clients and various display settings. These tools can help identify any rendering issues and provide insights into how your emails appear in dark mode.

  • Ensure that your email templates are up to date and compatible with dark mode. Shopify regularly updates its default email templates, so it’s worth checking for any updates or changes to ensure compatibility.

  • Utilize a dark mode email template, which can be obtained from a range of free or paid options available online.

  • Dark mode support can vary across different email clients and devices. Test your emails in various email clients, such as Gmail, Outlook, Apple Mail, etc., to identify if the issue is specific to certain clients or if it’s a general problem.

When designing emails that work effectively in dark mode, consider the following tips.

Prioritize high contrast between text and background colors, choose light or dark text based on the background for better visibility, avoid overly bright colors, optimize images for dark mode compatibility, maintain a clear and concise layout, and ensure easily identifiable and clickable call-to-action buttons.

Let me know if you have any further questions.

Gina