Dark Mode on iOS impacting Shopify Email visibility

[nealchauhan]

Hey!!

I'm setting up a campaign for Shopify Email, and have noticed that when viewing emails on my iPhone (using night/dark mode), my black logo becomes barely legible against the background of Gmail. This isn't an issue on desktop gmail clients, or using day/light mode on my phone.

Any ideas if there's a fix for this?

  

[cpark1202]

Did you find an answer? I'm also experiencing this problem with Gmail mobile.

[nealchauhan]

No luck, unfortunately!

[aidokearns]

I'm currently having this issue also. Bumping this thread in the hopes someone sees it and can help

[Shay]

Hi @aidokearns 

Thanks for bumping this thread!

I reviewed the email editor on my end as well and it looks like the issue you are experiencing could be related to the fact that your logo image has a transparent background. This means that the empty space surrounding your logo shows whatever background color it is on top of. For emails or other pages where your logo could be against a similar color, it is good to change the image file to one with a solid background color. 

You can easily fill in the background in an image editor program like Photoshop or Corel, but if you don't have those you can use a free image editor like Pixlr: https://pixlr.com. If you aren't sure what I mean by a transparent background, I'll share an example below:

This is my cat, Bug! He is very dark in color so placing him on a dark background is not ideal. The checkered background that we are seeing is commonly used to show that there is no background in this image file, or that the background is transparent. This means when uploading it to my store or email, it will lay overtop of the website background. I will want to fill the background in with a color (usually white) in order for this image to show up on dark emails or websites. 

When editing your email you can click on logo image and you can then upload your replacement logo that you want to use that has a solid color background. 

I hope this helps!

[aidokearns]

This is not an acceptable solution to the problem we are having, nor is it a solution to the problem you've identified with the transparent background on my logo. If I choose a logo image with a solid background colour, it would appear like this:

Logo with solid background on device with Dark Mode

How is this your solution?? I chose the background colour for that section and expect it to display on all devices irregardless of dark mode settings.

The problem we are having is that we are choosing specific colours that we want to appear as the background of sections of our emails, but Shopify allows a setting on people's devices to change those colours. How can we prevent background colours like this:

Original email campagin design

 being changed to this:

Dark Mode version

This should not be the default. The default actions should be whatever colours we choose are the ones displayed. We can't even preview what our emails would look like in dark mode. If some people wish to accommodate their customer's dark mode setting, then Shopify needs to add a toggle that will show us a preview of what that will look like and allow us to enable or disable this.

Is there a piece of code that I can add to my email template or wherever, that will allow me to prevent devices displaying my email content in dark mode?

[Shay]

Hi @aidokearns 

Thank you for sharing that additional context. I can understand that you want to maintain your design and brand in your emails. 

At this time Shopify Email doesn't support coding/html/css/rich text in the email editor, this means that you wouldn't be able to add in any code or overrides for dark mode vs light mode. There are a range of email marketing apps on the app store that might offer that functionality, you would need to contact the app developers or test the apps to make sure of that though. 

I was able to find a very detailed guide on this topic for you, that can help with resolving this issue if you choose to move to a different email marketing service: Dark Mode Email: Your Ultimate How-to Guide - Litmus. 

Please keep in mind that dark mode is a very popular option and is widely adopted by many users. It is also incredibly beneficial for people with learning differences, color blindness, visual impairments, or anyone needing to have a high contrast color scheme. I would encourage you to consider a design style for your emails that is inclusive for all potential customers and that will translate well across different preferred color schemes that your customers may use. The guide I shared above has some great examples of how to do that too.

I want you to know that I have submitted feedback to our developers on your behalf regarding this and hopefully we will see more functionality for Shopify Email in the future. 

[EnricaBrroks]

Thanks for sharing.

[Mvtimes07]

Have you ever been able to find a resolve? I'm at a loss with the shopify email builder. 

My emails literally invert 100% while I see other brands sending out emails that don't get altered one bit. There must be a way...