---
title: "Plan for dark mode · Agent Wranglers"
url: https://agentwranglers.se/playbook/email/layout-and-accessibility/email-dark-mode
updated: 2026-10-20
licence: "All rights reserved"
---

# Plan for dark mode

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)
- Rule: Design for clients that switch to dark mode, so text stays readable and logos stay visible.
- How: Declare support with `<meta name="color-scheme" content="light dark">` and `<meta name="supported-color-schemes" content="light dark">`. Add `prefers-color-scheme` styles where clients support them, such as Apple Mail. Other clients invert colours on their own. Avoid pure black on pure white, and give dark logos a light outline that works on both.
- Check: Send a test to Apple Mail, Gmail and Outlook with dark mode on. All text stays readable, and logos and icons stay visible.

Example:

```html
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
  @media (prefers-color-scheme: dark) {
    .body { background:#14172e !important; color:#f5f7ff !important; }
  }
</style>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/email-dark-mode`.

- Previous: [Make buttons easy to tap](https://agentwranglers.se/playbook/email/layout-and-accessibility/email-buttons)
- Next: [Write a preheader](https://agentwranglers.se/playbook/email/layout-and-accessibility/preheader)
- [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)