Firmas de correo electrónico en modo oscuro que no se ven rotas
Dark mode is no longer a preference—it is the default OS setting for a growing percentage of your recipients. When your carefully crafted email signature inverts colours, turns your logo into a negative, or makes your contact text invisible, you lose credibility. Here is how to build a dark mode email signature that renders correctly across Gmail, Outlook, Apple Mail, and every major webmail client.
Why most email signatures break in dark mode
Email clients do not handle dark mode uniformly. Gmail and Outlook on iOS invert colours aggressively. Apple Mail applies a "smart invert" that can flip your logo colours while leaving text untouched. Outlook desktop (Windows) uses a proprietary rendering engine that strips inline styles and replaces them with its own dark palette. The result is a signature that looks perfect in your composer but becomes unreadable in a dark inbox.
The core problem is that most signature builders and DIY templates rely on hard-coded background colours and non-transparent images. When the client inverts the entire email, your white background becomes black, your black text becomes white, and your logo—designed for a light background—turns into a dark blob on a dark field.
Use transparent images with a light outline
Your logo is the most common casualty. A logo with a white background rectangle will look like a floating white box in dark mode. The fix is simple: export your logo as a PNG with a transparent background. Then add a thin, light-coloured border (1px solid #ffffff) around the image using inline CSS. This border will remain visible on dark backgrounds and disappear on light backgrounds.
For icons like phone or email glyphs, use SVG inline or a transparent PNG with a white stroke. Avoid black icons entirely—they vanish on dark backgrounds. If you must use a black icon, wrap it in a <span> with a white background and rounded corners, then apply a dark media query to swap the background.
@media (prefers-color-scheme: dark) {
.signature-icon {
filter: invert(1);
}
}
This CSS rule inverts the icon colours only when the user's system is in dark mode. It works in Apple Mail and most webmail clients, but not in Outlook desktop (which ignores media queries entirely).
Set explicit background colours on every table cell
Email signatures are built on tables. If you do not set a background colour on the <td> or <table> element, the client will apply its own default—often black or dark grey. Set bgcolor="#ffffff" on every cell that should stay white. For the outer table, set bgcolor="transparent" so the client's dark background shows through.
For text, use a dark colour like #222222 instead of pure black #000000. Pure black text on a white background is harsh; on a dark background it becomes invisible. A near-black colour like #1a1a1a will still render as black in light mode but will be inverted to a readable light grey in dark mode.
Outlook desktop ignores bgcolor on <td> in dark mode. The only reliable workaround is to use a VML (Vector Markup Language) background rectangle, but that adds complexity. For most users, accepting that Outlook desktop will show a slightly different background is the pragmatic trade-off.
Add a dark mode media query for email clients that support it
Apple Mail, Gmail (iOS/Android), and Samsung Email support the prefers-color-scheme media query. Use it to override your signature's colours when the user is in dark mode. Wrap your dark-mode styles in a <style> block inside the <head> of your email.
<style>
@media (prefers-color-scheme: dark) {
.sig-text {
color: #e0e0e0 !important;
}
.sig-bg {
background-color: #2d2d2d !important;
}
.sig-link {
color: #8ab4f8 !important;
}
}
</style>
Apply these classes to the relevant elements in your signature table. The !important flag is necessary because email clients often inject their own styles after yours. This approach gives you control over text colour, link colour, and background colour in dark mode without affecting the light-mode appearance.
A common mistake is to forget that links also need dark-mode overrides. Default link blue (#0000ee) is too dark on a black background. Switch it to a lighter blue like #8ab4f8 (Google's link colour in dark mode).
Handle Outlook's proprietary dark mode engine
Outlook for Windows (Office 365, 2019, 2021) does not support media queries. Instead, it uses a "dark mode" engine that forcibly inverts colours based on luminosity. It also strips <style> blocks from the <head> and only respects inline styles.
To prevent Outlook from inverting your logo, add a data-ogsc attribute to the image tag:
<img src="logo.png" alt="Company logo" data-ogsc="" style="display:block; border:0; outline:none;">
The data-ogsc attribute tells Outlook to skip colour inversion for that image. This is undocumented but widely tested. Similarly, use data-ogsc="" on any element that should not be inverted.
For background colours, Outlook's dark mode engine will still override your bgcolor on tables. The only way to force a white background in Outlook is to use a VML rectangle behind the content. This is complex and fragile. A simpler approach: design your signature to look acceptable on a dark grey background. Use light text colours (#e0e0e0) and a transparent outer table so Outlook's dark background shows through naturally.
Test across real clients, not preview panes
No single technique works everywhere. You must test your signature in:
- Gmail (web, iOS, Android)
- Outlook (desktop, web, iOS, Android)
- Apple Mail (macOS, iOS)
- Yahoo Mail
- Proton Mail
Each client handles dark mode differently. Gmail web does not invert images but does invert background colours. Outlook desktop inverts everything except elements with data-ogsc. Apple Mail respects media queries but applies its own "smart invert" on images with white backgrounds.
Use a tool like Litmus or Email on Acid for automated screenshots, but also send a test to your own phone and desktop. Check that your logo is visible, your text is readable, and your links are clickable. A signature that looks perfect in the preview pane but broken in the actual inbox is worse than no signature at all.
How newmail.click handles this
newmail.click generates your signature as a single table with inline styles, transparent images, and explicit background colours. We apply data-ogsc attributes automatically for Outlook compatibility. When you enable Pro-tier click and open tracking, we inject tracking pixels and link wrappers without breaking dark mode rendering. You receive Slack and email alerts on opens and clicks, and we set default UTM parameters on your links for campaign attribution. The signature builder is free; tracking and alerts are Pro features. We do not offer team management, SSO, or SCIM.
Build once, send confidently
Dark mode is not going away, and email clients will continue to diverge in how they handle it. By using transparent images, explicit background colours, media queries for supporting clients, and Outlook-specific attributes, you can create a signature that looks professional in any inbox. Test it, fix the edge cases, and move on.