Mail app on iOS Dark Mode

[ianmclaughlin]

Mail isn't automatically dark inverted using the Mail app on iOS, until I use @media (prefers-color-scheme: dark) and feed it the inverted colors

    @media (prefers-color-scheme: dark) {
        body {
          background-color: #0b0a09;
          color: white;
        }
        
        .body {
          background-color: #0b0a09;
        }
       
        .main {
          background: #000;
        }
        
        .footer td,
        .footer p,
        .footer span,
        .footer a {
          color: #656159;
        }
    }

[leemunroe]

Thanks for this @ianmclaughlin

For inlined we can embed these styles and use !important

However I was under the impression iOS Mail would automatically invert. Adding something like this just gives you more control over those dark mode colors. Could you share a screenshot?

This is what I see in Gmail app when switching between light and dark mode. And this is what Litmus shows me for iPhone 15 (I don't have Apple Mail on iOS handy).

[ianmclaughlin]

I should probably have mentioned, I was including images. Reading around I came across this https://www.dyspatch.io/blog/the-danger-of-dark-mode-and-email/ and this https://www.campaignmonitor.com/resources/guides/dark-mode-in-email so I tried the media query.

Without the media query:

With the media query:

[jos3fox]

@ianmclaughlin

Hi there! I got a question about your last reply. when you added that media query for dark mode. does not be affecting by other Mail clients? like outlook or gmail? also you are not adding any !important in those queries so maybe mail client can change it for you. I like this simple template for that but I would like to make it maybe not bullet proof but close.

Any recommendation it would be appreciate it though. @leemunroe

I almost forget to say something. if I want to add like a head image I'm not referring to top top of the email but more like simple image. where exactly you have add html I added after and then in tbody I just added new for example:

<table border="0" cellpadding="0" cellspacing="0" class="main" role="presentation" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border: 1px solid #eaebed; border-radius: 16px; width: 100%;" width="100%"><!-- START MAIN CONTENT AREA --> <tbody> <tr> <td><a href="[EXAMPLE]"><img alt="Example ALT." src="[EXAMPLE].PNG" style="max-width: 100%; border-width: 0px; border-style: solid; width: 500px;" /> </a></td> </tr>

Also I added max-width:100% to make it responsive otherwise the responsive didn't work at all the image just stuck there.

If you consider this is not a good place to add you can let me know.

and again thanks!

Regards