All Collections
Best Practices
Tips for Designing for Dark Mode
Tips for Designing for Dark Mode
Matt Sena avatar
Written by Matt Sena
Updated over a week ago

Switching to dark mode on mobile phones and laptops is becoming more popular. Dark mode is a user interface that allows the user to access and see their screen in an altered, reversed color scheme. It means having dark background colors with lighter foreground elements, such as text and dividers.

To make sure that your templates adjust seamlessly and work cohesively with the Dark Mode interface, be sure to follow these tips:

  1. Use transparent PNGs for the images

  • Dark mode doesn’t edit or alter images so make sure to avoid images that match the background color

  • Make sure the images complement the background

  1. Use HTML/CSS for Dividers and Separators

  • To let the dividers/separators seamlessly switch colors when switched to the dark mode, it is better to use HTML/CSS to add them in instead of adding images

  1. Add an outline to your logo

  • If your logo has dark colors, make sure to add a white outline so the image will be visible even when in dark mode

  1. Make sure that even small images and icons, such as the social media ones in your footer, are saved in one of the following ways:

  • With a white background

  • As a transparent PNG

  • With a stroke or outline around the edge

  1. Add a filter via CSS with brightness and contrast adjustment so it won’t be too bright when dark mode is used

  • Sample code: img { filter: brightness(.8) contrast(1.2); }

  1. Test your template on dark mode

  • Once your template is finished, try to change the background color to black to test how it will look in dark mode. Make necessary adjustments to make the design more aesthetically pleasing. Go to Uporder > Template Settings > Email Styles > Background Color (sample: #00000)

  1. Live text is preferred over text in images, so it can adapt and change colors when in dark mode

  • Be careful in choosing font colors since the color inversion when in dark mode will make words difficult to read

  • Avoid using harsh contrasts like pure white surfaces or very saturated colors

  • According to Google, different shades of light gray are the ideal colors for disabled, medium-emphasis, and high-emphasis texts.

  1. Don’t use shadows

  • The best option is to refrain from using shadows for texts or images. It might help to highlight the object for light mode, but unfortunately, it won’t be of much help for dark mode.

These tips will help provide a better user experience for your customers regardless if they are using the light mode or dark mode.

Feel free to reach out to our support team at [email protected] if you have any questions!

Did this answer your question?