Apple Mail requires the `supported-color-scheme` meta or CSS property for dark mode

[hteumeuleu]

All versions of Apple Mail (on macOS or iOS) require either the <meta name="supported-color-scheme" value="light dark"> tag or color-scheme: light dark; CSS property for dark mode to work. This is weird and opposite to the way dark mode works on the web where these meta/property are totally optional and only serve to let the browser make default changes (for form controls for example).

On top of that, Apple Mail requirements for these has evolved over the years. From what I can test, in Apple Mail 12 (macOS Mojave), Apple Mail requires the meta notation (and doesn't support the CSS notation):

<meta name="supported-color-schemes" value="light dark">

From Apple Mail 13 (macOS Catalina) and above, Apple Mail requires the CSS notation (and no longer supports the meta notation):

:root {
    color-scheme: light dark;
}

Also worth mentioning that before Apple Mail 12, during macOS Mojave beta, Apple supported the old syntax (with color-scheme instead of prefers-color-scheme). There was also a syntax of @media (prefers-dark-interface) but I don't believe it was ever supported.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

[o-t-w]

I just checked this on Apple Mail in the new iOS 17 and macOS Sonoma 14. It is sadly still an issue.

[joshdoesthis]

This was very helpful information and helped me solve the issue I was having with Mail on macOS. It remains the case in 2024.