Fill in four fields, check how it lands on every screen size, then copy it into your mail client. It carries no background of its own: it sits on whatever ground the client provides and repaints its own text for dark mode. Nothing is stored anywhere but this browser — the page remembers your details for next time.
Everything updates as you type. Leave a field empty and its line disappears — a signature without a phone number stays balanced. There is nothing else to set: the light and dark rendering are the same signature, and the client picks.
Only these four fields go into the signature.
There is no dark version to pick, because there is no light version either. The signature declares no background at all — it sits on whatever ground the client puts behind it — and changes nothing but its own ink. Three mechanisms do that, they fail independently, and it is worth being blunt about how far each one reaches.
| Part | How it switches | Where that actually works | Everywhere else |
|---|---|---|---|
| Text colours | @media (prefers-color-scheme: dark), with !important so it beats the inline colours | Apple Mail (macOS, iOS) and Outlook for Mac — and only where the <style> block survived the paste | Colours stay put; a client that inverts repaints them itself |
| The lockup | A <picture> source, and a second hidden image the media query reveals | <picture>: Apple Mail, Thunderbird, Samsung Email. The hidden-image swap: anywhere the media query works, which is what adds Outlook for Mac | Gmail rewrites <picture> to <u> and shows the fallback <img>: the blue lockup |
| Not being inverted | color-scheme: light dark | Where the <style> block or the downloaded file’s <meta> survives. It is also what stops older Outlook for Windows inverting the image itself | The client decides |
| Outlook.com | [data-ogsc] / [data-ogsb], the hooks it leaves when it recolours a message | Sometimes. Microsoft injects its own inline !important and can win | Its own partial inversion |
| The background | Nothing to switch | Always | Always. This is the part that cannot break. |
prefers-color-scheme at all. Gmail ignores it on every surface — but Gmail on the web does not darken the message either, so there the signature simply renders the way it does in light mode. The apps are where it shows: Gmail for iOS and Outlook for Windows invert fully, Gmail for Android and Outlook.com invert partially. In those, the client repaints the ink itself and the lockup keeps its blue on a darkened ground — around 2.3:1 against a typical dark canvas, so it reads as a quiet mark rather than a crisp one.
<style>, as Gmail’s does, and you keep the <picture> swap but lose the rest.
Two ways out of this page. They are not equivalent — one hands over the exact markup, the other hands over whatever your browser decided the selection meant.
The markup below, character for character. Every colour, every spacing value and the hosted logo URL survive the trip. Paste it into any signature field that accepts HTML — Outlook, Superhuman, Front, HubSpot, Zendesk, Mailchimp, most CRMs — and what you see here is what sends.
A rich-text copy of the picture on the left. Use it only where there is no HTML field — Gmail's editor is the main one. The clipboard round-trip is lossy: browsers rewrite the markup, and some clients then re-style the pasted result with their own default font and link colour.
After pasting, always send yourself one test message and look at it on a phone.
https://smm-assets.maia-8.click/assets/signature/…, a stable URL that is meant to be hotlinked. Do not re-host it, attach it, or paste the logo in as an inline image — embedded copies are what turn a signature into a grey box with a broken-image icon three clients down the reply chain.The same signature at the widths mail actually gets read at. Note the second number on each card: a 1440 px desktop does not hand the message 1440 px — it hands it a reading column of roughly 900. That column is what the signature has to survive, and it is why this one is a single column with no media queries: the clients that would need them most are the ones that strip them.
Which of the two copy buttons a client needs, and where its signature field lives.
| Client | Use | Where |
|---|---|---|
| Outlook (Windows) | HTML code | Download the file, drop it in %APPDATA%\Microsoft\Signatures, then pick it in File → Options → Mail → Signatures. |
| Outlook (web / new) | Rendered | Settings → Mail → Compose and reply → Email signature. |
| Gmail | Rendered | Settings → See all settings → General → Signature. Gmail has no HTML field. |
| Apple Mail | Rendered | Settings → Signatures. Untick Always match my default message font first, or it will flatten everything. |
| Superhuman · Front · Missive | HTML code | Signature settings → the </> / source view. |
| HubSpot · Salesforce · Zendesk | HTML code | User profile → signature → source editor. |
| Mailchimp and other platforms | HTML code | Paste into a code block. |