In this article we're sharing with you what our designers have learned about designing for dark mode.
Reasons to do it
Youβre working with recipients and inboxes, not against them. You get to keep the integrity of your design without losing out on readership because your email is designed for everyone in mind.
What it does
Dark mode inverts your light areas and dark text to dark areas with light text. So if your email is a white background with black text, it becomes an email with a black background with white text. This affects links as well. It does not affect images.
Dark mode donβts
- Do not attempt to work around dark mode by incorporating a lighter background image. This doesnβt work out as youβd expect β it will still recognize the text and background as needing to be reversed, so youβll end up with light text on a light background.
- Do not use all images. While this does ensure your email remains consistent regardless of the inbox or settings within, itβs not a good practice in general.
Dark mode doβs
- If you have a transparent logo that is dark, outline it with the color of your light background. This ensures the logo remains visible even in dark mode. Repeat this process with any dark transparent pngs such as icons or glyphs.
- With general images, keep in mind the end result. If you have a bright image that leads into a brightly colored background, if the image is not transparent, the bright background color will no longer match the image in dark mode. When possible, either make sure to have an intentional looking end point for the background of your image or make it transparent so that it can invert gracefully.
- If you have a background pattern or image youβd like to use, try making it as transparent as possible so that it still looks nice whether light or dark. No background pattern should be too busy, as that can affect the readability of your email.
If your email is already dark, it will not invert with dark mode turned on.
Dark mode isnβt for everybody, so itβs still good to essentially have both a light and dark version. However, you can still design specifically for dark mode if you want to ensure your email is consistent all around.
As always is the case: contrast is key
Regardless of how you continue to go about creating your emails, contrast is your best friend for best visibility and readability. Make sure your text is legible against its background, and that your CTAs are clearly visible and donβt fade into their surroundings.