How to fix email background if user has dark theme enabled in email?

M

mUchenik2022-02-25 01:57:00

css

mUchenik, 2022-02-25 01:57:00

All good and health!
Faced the problem of resetting the white color in the letter.
The meaning is this: I made up the letter (the body (background) of the letter is white), everything looks fine from the computer, but from mobile devices, the white background of the body of the letter disappears when the user has "dark mode" turned on
Tell me if it's possible to get around this somehow reset?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

Danny Arty, 2022-02-25
@mUchenik

It's strange, of course. In general, the dark theme simply inverts the colors and, accordingly, since the background color has been inverted, the text should also. Most email clients use partial color inversion, but this is usually sufficient.
The best solution, of course, is to use colors in emails that look equally good in both dark and light themes.
Another couple of options is to write your own styles for a dark theme.
For Apple devices ( caniemail ) a media query can be used . For example:@media (prefers-color-scheme: dark)

@media (prefers-color-scheme: dark) {
 p.body-text {
    color: #eee !important;
 }
}

For these styles to be successfully applied, you need to specify meta tags in the email:<head></head>

<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>

For others (most), you can use the prefix [data-ogsc]( caniemail ).
For example:

[data-ogsc] p.body-text {
  color: #eee !important;
}

ps When making layout, always test how the email will look in a dark theme. Unless of course you have just "plain-text"