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:rute.cintra@agidesk.com.br" target="_blank" style="text-decoration: none; color:#ff5f00;">rute.cintra@agidesk.com.br</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
Writing a good HTML/CSS email is hard because of the huge disparity between email client rendering engines. Most emails will completely break depending on where you're reading them. This usually surprises developers since we're used to things like modern browsers following tight standards to ensure feature compatibility. Here is a great piece on this by 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. If you follow the link you can see none of these features are supported on Gmail for example, which is really a client you should be targeting due to it's 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 and offers an online editor. 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.
If you're looking for something more code based that can be rendered at runtime then react-email might be for you. It also provides a better experience when working with template variables. The only downside here is you lose the language independence that the MJML editor provides.