Designing for dark mode

Article author
Miguel Panayotty
  • Updated

Introduction to dark mode

Dark mode is a device or application setting that allows people to work with backgrounds that are dark. For example, if your browser is in dark mode, the chrome background and some other settings like toolbars will be dark.

 

Advantages of dark mode

  • Dark mode is easier on the eyes and reduces strain. For this reason it is also considered an accessibility feature. Try checking your phone before going to sleep, or in the middle of the night, and you’ll understand why dark mode is helpful.
  • Dark mode can enhance legibility, making it easier to read content and notice details.
  • Bonus! Dark mode also helps reserve device resources, as less energy is needed to display content.

 

Here's the Apple Mail Inbox in dark mode and light mode:

   

 

 

Email client support for dark mode

Dark Mode has been around in some user interfaces for a long time, such as the Adobe Creative Suite and WordFly’s Image Editor, too. Now it’s being supported by email applications, in desktop, browser, and mobile clients. People can set dark mode as a device preference, or as an app preference. Keep in mind, as most email client support goes, the way each email client displays dark mode varies greatly.

 

Here's what we learned:

  • Some email clients keep the email as designed (no changes)
  • Some email clients invert colors partially (partial color invert)
  • Some email clients invert everything to dark mode (full color invert)

 

DARK MODE DETAILS EMAIL CLIENT EXAMPLES
No changes These email clients allow you to change the application interface to Dark Mode, without any impact on how your HTML email is rendered.

Apple Mail

Partial color invert

 Some email clients will only change parts of the email when in dark mode. For example, dark text would become light and a light background would become dark.

Outlook.com

Full color invert

 This is the most extreme inversion where the entire email will invert. This includes all text and all backgrounds. Even if you explicitly set a background to be white, the dark mode setting will invert it.  

Gmail app, Android

 

 

 

Dark mode design considerations

There are a few ways to work with your email design so that it continues to display well in dark mode. Be sure to review your email in dark mode to note what needs to be adjusted for display and readability. Use WordFly's Inbox Preview for testing dark mode in popular email clients. Remember that dark mode is a preference so it is best to work with the preference setting rather than trying to manipulate it back to the original design.

 

Review your logos and images

Dark logos and images with dark text might get lost if the background is transparent. It might be best to add a color background to help display in dark mode. Or, conversely, you may need to use a transparent background if the display of the logo or image with text would display better this way.

 

Review typography styles

Take a moment to make sure all your text is still readable in dark mode, including headings and fine print. Is the text still readable when the screen brightness is adjusted?

 

 

Resources to learn more

Review these deep dive guides for more information on dark mode:

 

 

Related articles