Skip to content

Dark Mode Email Preview

Dark mode is a display setting where email clients automatically transform email content to darker tones when the recipient's device or email client is configured to use a dark color scheme. Most major email clients (Gmail, Outlook, Apple Mail, Yahoo Mail, etc.) implement some form of dark mode rendering, each applying its own transformation rules.

What this feature does

The Dark Mode Email Preview feature allows content creators to preview how their email template will likely appear when viewed in dark mode on recipient devices. Instead of sending test emails and checking them across multiple clients, you can get an immediate approximation of the dark mode rendering directly within the editor.

Dark mode email preview

Configuration

To enable dark mode preview, include the following option in your TOPOL_OPTIONS configuration:

ts
enableDarkMode: true,

Usage

Once enabled, a dark mode toggle becomes available in the editor's Preview mode:

  1. Open your email template in the editor.
  2. Switch to Preview mode.
  3. Toggle the dark mode switch to see the dark mode version of your email.
Dark mode toggle switch in Preview mode

You can use this at any point during development or after finalizing the email to verify how your design holds up under dark mode transformations.

Important disclaimer

The dark mode preview is an approximation only. Each email client (Gmail, Outlook, Apple Mail, etc.) applies its own proprietary rules and algorithms for transforming emails into dark mode. Because of these differences, it is not possible to produce a single universal dark mode rendering that matches the behavior of every client. The actual appearance of your email may vary depending on the recipient's email client, device, and OS-level settings.