Hey @afaq, If it wasn’t hard enough that email looks different in some email clients, we now have Dark Mode to contend with!  I feel your pain, as we struggle with this as well to try to get our emails to look as they were intended.

From what I can gather online, there’s not a simple solution.  By definition, people want “Dark Mode” because they don’t want to have bright screens (perhaps in the middle of the night), improve legibility or in some cases, to save battery consumption on their devices (dark mode on OLED screens can increase your battery life).  

The premise here is, Dark Mode could be a system setting (on operating systems), sometimes on applications (browsers, email clients, etc) or a combination of both.  And because of this, the underlying systems/applications all adhere to implementing Dark Mode by ignoring certain attributes of our email code or in some cases completely changing their value to something else.  So when you want #FFFF, they interpret it as #00000 to respect the choice of the user who wants Dark Mode enabled.  

However, if you insist on overriding the user preferences, the only way that I’ve found where Dark Mode doesn’t impact the intent of the design (e.g. White or Bright colors) is to use images.  This would only work depending on how your Email Template is structured.  Though it’s tempting to just have “image only” emails to fully control the look and feel, there are many good reasons why you shouldn’t do this - so you have to balance the tradeoffs carefully. 

And if you go so far as to try this as a solution, you may be better off to just re-imagine and redesign your email templates so that it looks aesthetically pleasing regardless if Dark Mode is enabled or not. 

There are some best practices, that Klaviyo outlined here:
Best Practices for Dark Mode Template Design

I would love to see what other solutions the community might be able to share, other workarounds, or just accepting the fact that Dark Mode is here to stay and we all better just join the Dark side.

Are there any updates with regards to dark mode. I’m having issues and would like our edms viewed in dark mode if that is what the user wants. I’m using the new editor and would have thought the new editor would take something like this in account. 

Hey @Dario,

If a user/recipient wanted to view an email in dark mode, nothing really should be stopping them from doing so! 

The main troubles faced by marketers and email designers as @retention has mentioned is that dark mode is a user/recipient selected setting enabled on someone’s device. Because of this, you wouldn’t entirely be able to avoid the impact dark mode has on your email designs. 

Since dark mode is based on your user’s preference set on a device, that information regarding if someone is or is not using dark mode is not stored or shared anywhere. If you truly wanted to understand and know which mode your recipients prefer in order to send them specific dark/light mode designs, its typically best practice to ask your recipients directly! I’ve seen some clever methods some of our other members have asked for this preference through the use of both signup forms or through emails as an update profile property button in order to identify these users through customer profile properties. 

David

Thanks for the reply David. I’ll look at those links. I just thought that specifying a button a certain colour would keep that colour in either mode (light or dark) but the color I’ve chosen transforms to an almost transparent version of what was specified. Not the ‘solid’ color originally specified.

Here’s a link to 3 image files that explain my issue.

https://spaces.hightail.com/receive/vk8APOBtZL/dXMtZjBjNmMxMGUtNDJhNy00ZTBmLTgzMWUtN2M4OGY5NTM2YTAx

As demonstrated in the images, I’ve imported my buttons as PNG files with transparent background.. Now when viewed in dark mode, they are the ‘solid’ color I specified - However, the edges are pixelated and not pleasing to view.

So, I find that I’ve found a work around as was described in another thread, but that work around doesn’t give ideal results. In my mind, the simple fix is for Klaviyo’s developers to set the buttons to ‘solid’ colors if that is possible. Is that possible to do?

Thanks,

Dario

Hey @Dario,

I don’t see why you wouldn’t be able to set a button block’s background to a solid color. Once again, just keep in mind that dark mode would still play an effect on this and may cause those colors to be inverted.

From your screenshots, I would assume that the pixelation you’re seeing is based on the quality and resolution of the images you’ve imported for use into your template. When using images in Klaviyo, we suggest using 72dpi resolution since that’s industry standard as detailed in our How to use images in emails Help Center article. Additionally, I believe using an image with a transparent background is also an issue. Instead, if you wanted to import an image to use as a button that would not be effected by dark mode, you’ll want to import an image designed to be whatever color you want. I.E. importing and using an image of a button that already has a colored background. 

The difference between using a button block versus an image that acts as a button is that the button block is colored via CSS within the template and is susceptible to dark mode’s inversions. On the other hand, an image is a static picture that would not be adjustable by dark mode preferences - with the exception of if you decide to use a transparent background which would show through. 

If you need further help, it may be a good idea to reach out and speak with an email designer for more optimization assistances. You can also find a number of our wonderful Klaviyo Partners who offer email design services from our Klaviyo Partner Directory.

David