We are constantly working (and adapting letters) for Google, Yandex, Mail, Yahoo, Outlook 365 and have identified some adaptation patterns in these mail services.
In the article, we will show examples of working with the dark theme and solutions, how we ultimately managed to make a letter that is beautifully displayed in both dark and light themes.
Letter elements – on transparent background
This is what happens when the background of elements is white (left). And what happens if you make it transparent (right)
If the image on a transparent background is difficult to read in a dark theme, leave it partially white.
On the left, on the bottom icon, only one envelope is visible. We made a white backing – now both are visible (on the right)
For detailed images and icons, a background is sometimes unavoidable.
On the left picture, the icons are easy to read without the background. In the example in the middle, there are many thin lines, without the background they would not be visible. On the right picture, there are too many details – if you remove the background, they will look disjointed, the integrity will be lost.
The backing was made on a translucent background: in the light theme it is not visible (it turns white), but it is visible in the dark theme.
Highlighting and outlining in text, headings and logos
On the left, the logo is lost against the dark background. On the right, the logo was highlighted with a backlight, and it started to sparkle.
Sometimes icons in dark theme also need an outline. If icons in light theme are located on a colored background, give them a light background. Otherwise, the outline will be noticeable in classic theme.
On the left, some elements of the
icons are hard to see. On the right, we added a border, and now everything is easy to read.
Corporate texts that are formatted as images must be outlined or highlighted.
On the left are pictures and headings on a white background. On the right are pictures and texts on a transparent background with backlighting.
Many companies use branded fonts. But most mailers do not render them, but replace them with safe web fonts, and as a result, the letter will look completely different from the design layout, and may “move apart”.
To prevent this from happening, we cut amazon database the text with branded text pictures, but we need to make a light outline for the dark theme. The problem with the outline is that sometimes it is visible in the classic theme too.
Solution: choose a similar standard font europe cell phone number data address instead of the branded one. This will allow you not to waste time on outlines and not risk the design in the light theme, because the text adapts automatically.
On the left is an example with a corporate font (dark), it needed to be highlighted, but it would have been visible in a regular email subject. On the right is a similar standard font that adapts well.
Animation adapts in the same way as images.
From left to right: transparent background, white background and solid image