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:
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
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
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
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
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); }
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)
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.
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!