Best Practices: Dark Mode

Some of your recipients may have dark mode turned on, which would inverted colours. ContactMonkey allows you to view how the email will look when received on a device that is using dark mode.


  • 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 coloured buttons instead. 

Background Colours

  • Be careful using background colours, especially with images, since background colours may invert while images will not.
  • When using coloured text over a coloured background, account for enough contrast in dark mode when one or both colours 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 colours.
  • 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