The gif looks beautiful and complete in both dark and light themes.
Dark theme in reverse
On the left is the letter in light theme (as we planned). On the right is what the dark theme did to it.
Solution: the texts were cut into pictures so that the white text would not be inverted into black, and a black background picture was placed under the entire letter except for the footer.
The result after corrections is now beautiful and in a dark theme
Adaptation of uneven edges of color substrates
Therefore, you need to cut them into two rectangles, but in the dark theme, the color of the pictures changes to the opposite. The result is like in the screenshot in the center.
On the left is the letter displayed in the light theme. In the center is the dark theme without any tricks. On the right is how we figured out how to fix it
It could have been done even better: put a semi-transparent background image under the text between the bars so that the color in the dark theme would match perfectly. But under tight deadlines, alas, sometimes there is simply no time to think of an even better solution.
Inversion of text, images and buttons
On the left is a letter in the light theme, the text is black. In the dark theme (on the left), the text color is inverted – and becomes unreadable
You can leave a light image with black text in a dark theme if you lay out both elements with images and place them on top of each other. Or cut out the entire banner with an image.
“The situation with white bars is quite ambiguous now. The Yandex.Mail mobile app has “learned” to recognize white bars in the code, but so far not very successfully — it works every other time.
The optimal solution for such blocks, instagram database I think, would be to set a high level of transparency for the bar itself. If the background of the letter itself is initially white, then this will not affect their appearance in any way, but it will help in the fight against the problems of the dark theme.”
Lesya, layout designer at Inbox Marketing
In cases where the letter itself or part of it initially has a light text color, it usually remains unchanged. The background asia mobile number data address color of such a letter or block sometimes also remains unchanged. But in practice, there are some not entirely predictable options.
On the left is a letter in the light theme. On the right is a letter in the dark theme. The pink color of the bar has become dark red, but the text on the button of the same color for some reason has not changed
But here, for some reason, only the color of the line for “New Year” has changed.
Test the display of letters
and collect solutions
Collect successful solutions from the tests and keep them at hand – this saves time. Here are a couple of tips on the dark theme for the end.