Plan for dark mode

How to do it

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.

Example

<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>

How to check

Send a test to Apple Mail, Gmail and Outlook with dark mode on. All text stays readable, and logos and icons stay visible.