Solved

Dark Mode email template

  • 14 December 2020
  • 1 reply
  • 163 views

Badge

Hi there,

I setup a template and i just test it. I want to show my email template white background in dark mode. https://prnt.sc/w2lxvx

Thanks

icon

Best answer by retention 15 December 2020, 08:05

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.

 

View original

1 reply

Userlevel 6
Badge +4

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.

 

Reply