Question posted in 
I’m currently creating a signature email with html and inline css. But I don’t know how to force devices with dark mode to respect the colors that I set.
And I didn’t find at the internet how to solve this problem with inline css. Can someone help me?
For information: I set the color #431407
<body style="color-scheme: light dark;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;max-width: 703px; padding: 10px;border:1px solid #cccccc;background-image: url('https://atendimento.agidesk.com//uploads/1/files/2024/08/196888305212099/fundo_3.png');background-repeat: no-repeat;background-size:100% 100%;word-break: break-word">
<tr>
<td width="25%" valign="top" style="padding-left: 10px; align-items: center;">
<img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/177789489766063/Logo_horizontal_white.png" style="width: 90%;min-width: 100px;display: block; margin-top: 20px;">
<p style="text-align: center; margin:-5px 0 0;line-height: 1.2; color: #70110a; font-family: sans-serif;">Simples como<br>tem que ser.</p>
</td>
<td width="25%" valign="top" style="padding-left: 10px;">
<img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/53680204017761/Screenshot_1_-_Copia.png" style="width: 100%;min-width: 140px;display: block; border-radius: 50%; border-style: solid; border-width: 5px; border-color: #70110a;">
</td>
<td width="50%" valign="top" style="padding:10px 0 0px 40px">
<p style="margin:0 0 5px;font-size: 30px;color: #70110a;line-height: 1.2;font-family: sans-serif;"><strong>Rute Cintra</strong></p>
<p style="margin:15px 0 5px;line-height: 1.2;font-family: sans-serif;color: #ff5f00;font-size: 16px">
<img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/88435035258933/email.png" style="width: 14px;display: inline-block;vertical-align: middle;margin-right: 5px;">
<strong><a href="mailto:[email protected]" target="_blank" style="text-decoration: none; color:#ff5f00;">[email protected]</a></strong>
</p>
<p style="margin:10px 0 5px;line-height: 1.2;font-family: sans-serif;font-size: 16px">
<img src="https://atendimento.agidesk.com//uploads/1/files/2024/08/322923827734437/phone.png" style="width: 14px;display: inline-block;vertical-align: middle;margin-right: 5px;">
<strong><a href="https://wa.me/5582996024017" target="_blank" style="text-decoration: none; color:#ff5f00;">+55 (82) 99602.4017</a></strong>
</p>
<p style="margin:15px 0 5px 40px;font-size: 16px;line-height: 1.2;font-family: sans-serif;font-weight: normal;"><strong><a href="https://agidesk.com/" target="_blank" style="text-decoration: none; color: #ad3b3b;">www.agidesk.com</a></strong></p>
</td>
</tr>
</table>
</body>
I tried add style="color-scheme: light dark;" in the body, but didn’t work either
2
Answers
you can try to add this meta tag:
Writing HTML/CSS emails is a delicate art.
Due to the huge disparity between email client rendering engines, most emails will completely break depending on where you’re reading them. This usually comes as shock since we’re used to things like modern browsers following tight standards to ensure feature compatibility. Here is a great piece on it be Mailosaur.
Similarly to Can I use?, for checking browser compatibility, you have Can I email?, for checking the availability of specific features on a per email client basis. Here is a search with results for the specific features you are looking for. Spoiler alert, none of them are support on any Gmail version, which is really a client you should be targeting due to the user base size.
My point is, if none of the others suggestions you find here (or elsewhere) are working, maybe check if you’re not trying to use unsupported clients, and maybe rethink if you want to use a feature with such high unavailability to begin with.
On a short note, I recommend using MJML, it writes perfectly cross compatible emails with an easy to learn syntax. I don’t believe it has the kinda of dark mode support you’re seeking, but then again, that’s probably because it’s a hard feature to work with compatibility wise.