How to make your email work in Apple Mail dark mode

Apple Mail respects dark mode styles if you tell it you have them. Here's the code to add, how to swap logos, and how to check the result.

3 Nov 2026 · 2 min read

A lot of people read email in dark mode, and Apple Mail is one of the most popular email apps. The good news is that Apple Mail gives you real control over how your email looks in dark mode, as long as you ask for it.

1Tell Apple Mail you support dark mode

Add these two lines inside your <head>:

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

And add this to your <style> block:

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

This tells Apple Mail you've designed for both modes, so it uses your colours rather than guessing.

2Add your dark colours

Use a media query to set the colours for dark mode. Give the elements you want to change a class, and use !important so your dark styles win over the inline ones:

@media (prefers-color-scheme: dark) {
  .email-bg { background: #111111 !important; }
  .email-card { background: #1c1c1c !important; }
  .email-text { color: #eeeeee !important; }
}

Pick dark greys rather than pure black for large backgrounds. They're easier on the eye, and they let you show depth between the page and the content.

3Swap your logo

A dark logo on a dark background vanishes. Include both versions and show the right one:

<img src="logo-dark-text.png" class="logo-light" alt="Your brand">
<img src="logo-light-text.png" class="logo-dark" alt="Your brand" style="display:none;">

@media (prefers-color-scheme: dark) {
  .logo-light { display: none !important; }
  .logo-dark { display: block !important; }
}

A simpler option is a logo with a light outline or a transparent PNG that works on both.

4Check it

Switching your own phone to dark mode and sending yourself test emails works, but it's slow. EmailTestr renders every email in Apple Mail on iPhone and Mac in both light and dark mode at once, so you can compare them side by side and flick between them in the full-size viewer.