Best Practices: Dark Mode

Images

  • We recommend using transparent images for a more seamless look and feel in your design.
  • If you don’t have the option to use a transparent image, try adding more whitespace. This will communicate that the extra whitespace is present intentionally. Alternatively, you can even make the images full-width, if appropriate.

Dark Assets

  • Because logos with black text or dark imagery will get lost on a dark background, you should include a white border or glow to add contrast in dark mode.
  • Likewise, black and black-outlined buttons may blend into the background in some clients, so try a slightly light-tinted black for outlines or fills, or use colored buttons instead. 

Background Colors

  • Be careful using background colors, especially with images, since background colors may invert, while images will not.
  • When using colored text over a colored background, account for enough contrast in dark mode when one or both colors may change.
  • Note that in some clients, sections with light text on dark backgrounds will not change in dark mode.
  • Be aware that dark mode may invert images used as background elements. If you’re using text on top of background images, consider saving the text as part of the image itself to preserve true image colors.
  • While there are some CSS snippets you can use to (try to) hack dark mode, we recommend the path of least resistance. You will knock those emails out faster and with less headache, if you prepare your emails and graphics with dark mode in mind.




Have more questions? Submit a request